html - 隐藏 SVG 会影响同一页面中的其他 SVG 样式

Question

在同一页面中多次加载 SVG。 SVG 用于显示值的图形表示。想象一张 map ，其中每个区域都使用颜色代码显示给定的值。

在每个 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 都失去了图案填充。

我做了一个简化的 Plunker 来显示这个问题。

https://plnkr.co/edit/F5TzOwDEzneHEW7PT3Ls?p=preview

我发现防止这种情况的唯一方法是为每个 SVG 使用不同的模式 ids，但由于所有 SVG 共享同一个文件，我不喜欢复制所有这些文件并重命名的解决方案ID只是为了这个。我想知道应该有更好的解决方案。

Answer 1

我会将图案放在不同的 svg 元素中:<svg class="defs"> .此 svg 元素可能有 position:absolute以及非常小的宽度和高度。如果添加 left: -200px;这个 svg 元素是不可见的。

此外:如果一个 SVG 元素具有此 css 规则:.striped-pain-1 {fill: url(#striped-pain-1);}你不需要将它添加到第二个。事实上你可以删除<style>来自 svg 的元素并将此规则添加到 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>