Question

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都会松开图案填充。

我制作了一个简化的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);}，则无需将其添加到第二个SVG元素中。实际上，您可以从svg中删除<style>元素，然后将此规则添加到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>

Answer 2

出现此问题是因为您为两个不同的元素指定了相同的id：

<pattern id="striped-pain-1"在第52和69行。

In HTML id should be unique。

id属性为HTML元素指定唯一ID（值在HTML文档中必须是唯一的。

将重复的id替换为唯一的<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>AngularJS Plunker</title> <script>document.write('<base href="' + document.location + '" />');</script> <link rel="stylesheet" href="style.css" /> <script data-require="angular.js@1.5.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js" data-semver="1.5.11"></script> <script src="app.js"></script> <script> function show(id) { document.getElementById('circle-' + id).style.display = 'block'; } function hide(id) { document.getElementById('circle-' + id).style.display = 'none'; } function reset() { document.getElementById('circle-1').style.display = 'block'; document.getElementById('circle-2').style.display = 'block'; } </script> </head> <body ng-controller="MainCtrl"> <div style="padding:10px"> <input type='button' onclick="hide(1)" value="Step 1: Click here to hide first circle. Second will loose style." /> </div> <div style="padding:10px"> <input type='button' onclick="show(1)" value="Step 2: Click here to show first circle. Second will gain style." /> </div> <div style="padding:10px"> <input type='button' onclick="hide(2)" value="Step 3: Click here to hide second circle. First is not affected." /> </div> <div style="padding:10px"> <input type='button' onclick="reset()" value="Step 4: Reset." /> </div> <div id="circle-1" style="padding:10px;border:solid grey 1px"> Circle 1 <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 id="circle-2" style="padding:10px;border:solid grey 1px"> Circle 2 <svg height="100" width="100"> <style> /* */ .striped-pain-2 {fill: url(#striped-pain-2);} /* */ </style> <defs> <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> <circle class="striped-pain-2" cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" /> </svg> </div> <div style="padding:10px;border:solid grey 1px"> Circle 3 <svg height="100" width="100"> <style> /* */ .striped-pain-3 {fill: url(#striped-pain-3);} /* */ </style> <defs> <pattern id="striped-pain-3" 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-3" cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" /> </svg> </div> <div style="padding:10px;"> These circles are SVGs. They have background applied as a pattern. The first two use clases with the same name, but the third not. Hidding the first SVG affects the second one, but hidding the second does not affect the first. </div> </body> </html>可解决此问题。请参见下面的代码段：

function show(id) {
  document.getElementById('circle-' + id).style.display = 'block';
}

function hide(id) {
  document.getElementById('circle-' + id).style.display = 'none';
}

function reset() {
  document.getElementById('circle-1').style.display = 'block';
  document.getElementById('circle-2').style.display = 'block';
}

可能您可能想摆脱SVG并使用更简单的方法：

#circle-1,
#circle-2,
#circle-3 {
  padding: 10px;
  border: solid grey 1px
}

.circle {
  display: inline-block;
  width: 80px;
  height: 80px;
  margin: 10px;
  border: solid 3px #000;
  border-radius: 55%;
  background: linear-gradient(135deg, #fff 20%, pink 21%, pink 50%, #fff 51%, #fff 71%, pink 72%) 0 0 / 8px 8px;
}


}

<div style="padding:10px">
  <input type='button' onclick="hide(1)" value="Step 1: Click here to hide first circle. Second will loose style." />
</div>

<div style="padding:10px">
  <input type='button' onclick="show(1)" value="Step 2: Click here to show first circle. Second will gain style." />
</div>

<div style="padding:10px">
  <input type='button' onclick="hide(2)" value="Step 3: Click here to hide second circle. First is not affected." />
</div>

<div style="padding:10px">
  <input type='button' onclick="reset()" value="Step 4: Reset." />
</div>

<div id="circle-1">Circle 1 <span class="circle"></span></div>
<div id="circle-2">Circle 2 <span class="circle"></span></div>
<div id="circle-3">Circle 3 <span class="circle"></span></div>

.activate

Answer 3

您的问题是您正在使用id =“ striped-pain-1”定义SVG路径。分两个步骤：首先，从toogle元素中移出一个独特的SVG模式以用作样式，我使用了“＃striped-pain-unique”。接下来，在所需的每个元素中使用填充URL。

.striped-pain-1 {fill: url(#striped-pain-unique);}

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.5.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js" data-semver="1.5.11"></script>
    <script src="app.js"></script>
    <script>
      function show(id) {
        document.getElementById('circle-' + id).style.display = 'block';
      }
      function hide(id) {
        document.getElementById('circle-' + id).style.display = 'none';
      }
      function reset() {
        document.getElementById('circle-1').style.display = 'block';
        document.getElementById('circle-2').style.display = 'block';
      }
    </script>
  </head>

<body ng-controller="MainCtrl">
    
<div style="padding:10px">
  <input type='button' onclick="hide(1)" value="Step 1: Click here to hide first circle. Second will loose style." /> 
</div>

<div style="padding:10px">
  <input type='button' onclick="show(1)" value="Step 2: Click here to show first circle. Second will gain style." /> 
</div>

<div style="padding:10px">
  <input type='button' onclick="hide(2)" value="Step 3: Click here to hide second circle. First is not affected." /> 
</div>

<div style="padding:10px">
  <input type='button' onclick="reset()" value="Step 4: Reset." /> 
</div>

<svg height="100" width="100">
    <defs>
    	<pattern id="striped-pain-unique" 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 id="circle-1" style="padding:10px;border:solid grey 1px">
  Circle 1
  <svg height="100" width="100">
  	<style>
  		/*  */
  		.striped-pain-1 {fill: url(#striped-pain-unique);}
  		/*  */
  	</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 id="circle-2" style="padding:10px;border:solid grey 1px">
  Circle 2
  <svg height="100" width="100">
    <style>
    		/*  */
    		.striped-pain-1 {fill: url(#striped-pain-unique);}
    		/*  */
    </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 style="padding:10px;border:solid grey 1px">
  Circle 3
  <svg height="100" width="100">
    <style>
    		/*  */
    		.striped-pain-2 {fill: url(#striped-pain-unique);}
    		/*  */
    </style>
    <defs>
    	<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>
    <circle class="striped-pain-2" cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
  </svg> 
</div>

<div style="padding:10px;">
  These circles are SVGs. They have background applied as a pattern. The first two use clases with the same name, but the third not.
  Hidding the first SVG affects the second one, but hidding the second does not affect the first.
</div>


  </body>

</html>

Hidding SVG会影响同一页面中的其他SVG样式

3 个答案: