SVG在同一页中加载多次。SVG用于显示值的图形表示。想象一个地图,其中每个区域都使用颜色代码显示给定的值。
在每个SVG中,对每个区域动态应用一个CSS类,以匹配所使用的所需SVG模式填充。
CSS样式和模式在SVG文件中定义。下面是一个例子:
<svg height="100" width="100">
<style>
/* */
.striped-pain-1 {fill: url(#striped-pain-1);}
/* */
</style>
<defs>
<pattern id="striped-pain-1" width="4" height="1" patternTransform="rotate(45 0 0)" patternUnits="userSpaceOnUse">
<line x1="0" y1="0" x2="0" y2="2" style="stroke:#EABFD5; stroke-width:6"></line>
</pattern>
</defs>
问题是,当SVG的打开被隐藏时(例如,通过
display:none
隐藏),从那里到页面底部的所有SVG都会释放模式填充。我做了一个简单的突袭显示了这个问题。
https://plnkr.co/edit/F5TzOwDEzneHEW7PT3Ls?p=preview
我发现防止这种情况的唯一方法是对每个SVG使用不同的模式,但是由于所有SVG共享同一个文件,所以我不希望解决方案复制所有SVG并为此重命名ID。我想应该有更好的解决办法。
最佳答案:
我将把模式放在另一个svg元素中:<svg class="defs">
。这个SVG元素的宽度和高度可能非常小。如果添加position:absolute
此svg元素将不可见。
另外:如果一个svg元素有这个css规则:left: -200px;
则不需要将其添加到第二个元素中。实际上,您可以从SVG中删除.striped-pain-1 {fill: url(#striped-pain-1);}
元素并将此规则添加到CSS中。
请尝试:单击数字(1、2、3)隐藏或取消隐藏SVG元素。
let spans = Array.from(document.querySelectorAll("#commands span"))
let svgs = Array.from(document.querySelectorAll(".svgcontainer"))
spans.forEach((s,i) =>{
let n = 0;
s.addEventListener("click",(e)=>{
n++;
let thisSvg = svgs[i].querySelector("svg")
if(n%2 == 1){thisSvg.style.display="none";
}else{
thisSvg.style.display="block";}
})
})
svg {
display:block;
}
.defs {
position: absolute;
left: -200px;
}
span {
display: inline-block;
width: 2em;
height: 1em;
border: 1px solid;
text-align: center;
cursor: pointer;
}
.svgcontainer {
height: 100px;
width: 100px;
border: 1px solid;
display: inline-block;
}
<p id="commands"><span>1</span> <span>2</span> <span>3</span></p>
<svg class="defs" width="1" height="1">
<defs>
<pattern id="striped-pain-1" width="4" height="1" patternTransform="rotate(45 0 0)" patternUnits="userSpaceOnUse">
<line x1="0" y1="0" x2="0" y2="2" style="stroke:#EABFD5; stroke-width:6"></line>
</pattern>
<pattern id="striped-pain-2" width="4" height="1" patternTransform="rotate(45 0 0)" patternUnits="userSpaceOnUse">
<line x1="0" y1="0" x2="0" y2="2" style="stroke:#EABFD5; stroke-width:6"></line>
</pattern>
</defs>
</svg>
<div class="svgcontainer">
<svg height="100" width="100">
<style>
/* */
.striped-pain-1 {fill: url(#striped-pain-1);}
/* */
</style>
<circle class="striped-pain-1" cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>
</div>
<div class="svgcontainer">
<svg height="100" width="100">
<!-- <style>
/* */
.striped-pain-1 {fill: url(#striped-pain-1);}
/* */
</style>-->
<!--<defs>
<pattern id="striped-pain-1" width="4" height="1" patternTransform="rotate(45 0 0)" patternUnits="userSpaceOnUse">
<line x1="0" y1="0" x2="0" y2="2" style="stroke:#EABFD5; stroke-width:6"></line>
</pattern>
</defs>-->
<circle class="striped-pain-1" cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>
</div>
<div class="svgcontainer">
<svg height="100" width="100">
<style>
/* */
.striped-pain-2 {fill: url(#striped-pain-2);}
/* */
</style>
<circle class="striped-pain-2" cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>
</div>