我有两个div，每个div包含相同svg的实例。
当我将第一个div设置为＆＃34; display：none＆＃34;时，第二个div中的svg变为灰色框。
这在firefox和chrome中都有发生。
为什么会发生这种情况，我该怎么办呢？
以下是一些示例代码：
P.S。我被设计师给了svg。
（编辑：我在Chrome版本64.0.3282.167和Firefox 45.9.0上。此外，在实际项目中。我将SVG作为React组件导入。所以对SVG将出现在两个实例中）
$("#button").click(function(){
$("#firstDiv").css("display","none");
})
$("#button2").click(function(){
$("#firstDiv").css("display","inherit");
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<button id="button">Hide First Div</button>
<button id="button2">Show First Div</button>
<div id="firstDiv">
<?xml version="1.0" encoding="utf-8"?>
<svg height="100" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve">
<style type="text/css">
.st0{filter:url(#Adobe_OpacityMaskFilter);}
.st1{fill:#FFFFFF;}
.st2{mask:url(#mask-2_1_);}
.st3{fill:#666666;}
</style>
<title>Icon/Close Copy</title>
<desc>Created with Sketch.</desc>
<g id="Cross" transform="translate(-1397.000000, -1518.000000)">
<g id="Group-44" transform="translate(0.000000, 1495.000000)">
<g id="Icon_x2F_Close" transform="translate(1391.000000, 17.000000)">
<g id="Combined-Shape" transform="translate(16.000000, 16.000000) rotate(-315.000000) translate(-16.000000, -16.000000) ">
</g>
<defs>
<filter id="Adobe_OpacityMaskFilter" filterUnits="userSpaceOnUse" x="-6.6" y="-6.6" width="45.3" height="45.3">
<feColorMatrix type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"/>
</filter>
</defs>
<mask maskUnits="userSpaceOnUse" x="-6.6" y="-6.6" width="45.3" height="45.3" id="mask-2_1_">
<g class="st0">
<path id="path-1_1_" class="st1" d="M16,14.6l7.8-7.8l1.4,1.4L17.4,16l7.8,7.8l-1.4,1.4L16,17.4l-7.8,7.8l-1.4-1.4l7.8-7.8
L6.8,8.2l1.4-1.4L16,14.6z"/>
</g>
</mask>
<g id="Color_x2F_Dark-Grey" class="st2">
<rect id="Rectangle-2" x="0" y="0" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -6.6274 16)" class="st3" width="32" height="32"/>
</g>
</g>
</g>
</g>
</svg>
</div>
<div>
<svg height="100" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve">
<style type="text/css">
.st0{filter:url(#Adobe_OpacityMaskFilter);}
.st1{fill:#FFFFFF;}
.st2{mask:url(#mask-2_1_);}
.st3{fill:#666666;}
</style>
<title>Icon/Close Copy</title>
<desc>Created with Sketch.</desc>
<g id="Cross" transform="translate(-1397.000000, -1518.000000)">
<g id="Group-44" transform="translate(0.000000, 1495.000000)">
<g id="Icon_x2F_Close" transform="translate(1391.000000, 17.000000)">
<g id="Combined-Shape" transform="translate(16.000000, 16.000000) rotate(-315.000000) translate(-16.000000, -16.000000) ">
</g>
<defs>
<filter id="Adobe_OpacityMaskFilter" filterUnits="userSpaceOnUse" x="-6.6" y="-6.6" width="45.3" height="45.3">
<feColorMatrix type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"/>
</filter>
</defs>
<mask maskUnits="userSpaceOnUse" x="-6.6" y="-6.6" width="45.3" height="45.3" id="mask-2_1_">
<g class="st0">
<path id="path-1_1_" class="st1" d="M16,14.6l7.8-7.8l1.4,1.4L17.4,16l7.8,7.8l-1.4,1.4L16,17.4l-7.8,7.8l-1.4-1.4l7.8-7.8
L6.8,8.2l1.4-1.4L16,14.6z"/>
</g>
</mask>
<g id="Color_x2F_Dark-Grey" class="st2">
<rect id="Rectangle-2" x="0" y="0" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -6.6274 16)" class="st3" width="32" height="32"/>
</g>
</g>
</g>
</g>
</svg>
</div>
答案 0 :(得分：2)
您不能拥有相同svg的多个元素（即使在id个容器中）。 id应该是唯一的。
请参阅代码段：
$("#button").click(function(){
$("#firstDiv").css("display","none");
})
$("#button2").click(function(){
$("#firstDiv").css("display","block");
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<button id="button">Hide First Div</button>
<button id="button2">Show First Div</button>
<div id="firstDiv">
<svg height="100" version="1.1" id="Layer_0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve">
<style type="text/css">
.st0{filter:url(#Adobe_OpacityMaskFilter0);}
.st1{fill:#FFFFFF;}
.st2{mask:url(#mask-2_1_1);}
.st3{fill:#666666;}
</style>
<title>Icon/Close Copy</title>
<desc>Created with Sketch.</desc>
<g id="Cross" transform="translate(-1397.000000, -1518.000000)">
<g id="Group-44" transform="translate(0.000000, 1495.000000)">
<g id="Icon_x2F_Close" transform="translate(1391.000000, 17.000000)">
<g id="Combined-Shape" transform="translate(16.000000, 16.000000) rotate(-315.000000) translate(-16.000000, -16.000000) ">
</g>
<defs>
<filter id="Adobe_OpacityMaskFilter0" filterUnits="userSpaceOnUse" x="-6.6" y="-6.6" width="45.3" height="45.3">
<feColorMatrix type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"/>
</filter>
</defs>
<mask maskUnits="userSpaceOnUse" x="-6.6" y="-6.6" width="45.3" height="45.3" id="mask-2_1_1">
<g class="st0">
<path id="path-1_1_" class="st1" d="M16,14.6l7.8-7.8l1.4,1.4L17.4,16l7.8,7.8l-1.4,1.4L16,17.4l-7.8,7.8l-1.4-1.4l7.8-7.8
L6.8,8.2l1.4-1.4L16,14.6z"/>
</g>
</mask>
<g id="Color_x2F_Dark-Grey" class="st2">
<rect id="Rectangle-2" x="0" y="0" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -6.6274 16)" class="st3" width="32" height="32"/>
</g>
</g>
</g>
</g>
</svg>
</div>
<div>
<svg height="100" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 20 20" sstyle="enable-background:new 0 0 20 20;" xxml:sspace="preserve">
<style type="text/css">
.st0{filter:url(#Adobe_OpacityMaskFilter);}
.st1{fill:#FFFFFF;}
.st2{mask:url(#mask-2_1_);}
.st3{fill:#666666;}
</style>
<title>Icon/Close Copy</title>
<desc>Created with Sketch.</desc>
<g id="Cross" transform="translate(-1397.000000, -1518.000000)">
<g id="Group-44" transform="translate(0.000000, 1495.000000)">
<g id="Icon_x2F_Close" transform="translate(1391.000000, 17.000000)">
<g id="Combined-Shape" transform="translate(16.000000, 16.000000) rotate(-315.000000) translate(-16.000000, -16.000000) ">
</g>
<defs>
<filter id="Adobe_OpacityMaskFilter" filterUnits="userSpaceOnUse" x="-6.6" y="-6.6" width="45.3" height="45.3">
<feColorMatrix type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"/>
</filter>
</defs>
<mask maskUnits="userSpaceOnUse" x="-6.6" y="-6.6" width="45.3" height="45.3" id="mask-2_1_">
<g class="st0">
<path id="path-1_1_" class="st1" d="M16,14.6l7.8-7.8l1.4,1.4L17.4,16l7.8,7.8l-1.4,1.4L16,17.4l-7.8,7.8l-1.4-1.4l7.8-7.8
L6.8,8.2l1.4-1.4L16,14.6z"/>
</g>
</mask>
<g id="Color_x2F_Dark-Grey" class="st2">
<rect id="Rectangle-2" x="0" y="0" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -6.6274 16)" class="st3" width="32" height="32"/>
</g>
</g>
</g>
</g>
</svg>
</div>
如果它被用作“删除”图标，则svg过于复杂。不应该有任何面具，团体，风格，定义等。它应该是这样的：
svg {width:50px; fill:#777}<svg viewBox="0 0 96 96"><path d="M96 14L82 0 48 34 14 0 0 14l34 34L0 82l14 14 34-34 34 34 14-14-34-34z"/></svg>
答案 1 :(得分：0)
无需在每个<div>中重复交叉SVG。您可以通过包含Cross SVG一次并使用<use>元素在每个div中引用它来整理页面（并缩小其大小）。
$("#button").click(function(){
$("#firstDiv").css("display","none");
})
$("#button2").click(function(){
$("#firstDiv").css("display","block");
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<button id="button">Hide First Div</button>
<button id="button2">Show First Div</button>
<div id="firstDiv">
<svg width="100" height="100" id="close" viewBox="0 0 20 20">
<use xlink:href="#Cross"/>
</svg>
</div>
<div>
<svg width="100" height="100" id="close" viewBox="0 0 20 20">
<use xlink:href="#Cross"/>
</svg>
</div>
<!-- hide the referenced SVG on the page by setting its width and height to 0 -->
<svg width="0" height="0" viewBox="0 0 20 20">
<style type="text/css">
.st1{fill:#FFFFFF;}
.st2{mask:url(#mask-2_1_1);}
.st3{fill:#666666;}
</style>
<g id="Cross" transform="translate(-1397.000000, -1518.000000)">
<g id="Group-44" transform="translate(0.000000, 1495.000000)">
<g id="Icon_x2F_Close" transform="translate(1391.000000, 17.000000)">
<g id="Combined-Shape" transform="translate(16.000000, 16.000000) rotate(-315.000000) translate(-16.000000, -16.000000) ">
</g>
<mask maskUnits="userSpaceOnUse" x="-6.6" y="-6.6" width="45.3" height="45.3" id="mask-2_1_1">
<g class="st0">
<path id="path-1_1_" class="st1" d="M16,14.6l7.8-7.8l1.4,1.4L17.4,16l7.8,7.8l-1.4,1.4L16,17.4l-7.8,7.8l-1.4-1.4l7.8-7.8
L6.8,8.2l1.4-1.4L16,14.6z"/>
</g>
</mask>
<g id="Color_x2F_Dark-Grey" class="st2">
<rect id="Rectangle-2" x="0" y="0" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -6.6274 16)" class="st3" width="32" height="32"/>
</g>
</g>
</g>
</g>
</svg>