隐藏SVG会影响同一页面中的其他SVG样式 [英] Hidding SVG affects other SVG styles in the same page
问题描述
同一页中多次加载了SVG. SVG用于显示值的图形表示.想象一下一个地图,其中每个区域都使用颜色代码显示给定的值.
An SVG is loaded several times in the same page. The SVG is used to show a graphic representation of values. Think of a map where every region shows a given value using a color code.
在每个SVG中,针对每个区域动态地应用CSS类以匹配所需的SVG模式填充.
In each SVG, for every region a CSS class is dynamically applied to match the desired SVG pattern fill used.
CSS样式和样式在SVG文件中定义.这是一个示例:
CSS styles and patterns are defined in the SVG file. Here is an example:
<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都会丢失图案填充.
The problem is when on of the SVGs is hidden (via display:none
for example) all SVGs from there to the bottom of the page loose the pattern fill.
我制作了一个简化的Plunker来显示问题.
I have made a simplified Plunker showing the problem.
https://plnkr.co/edit/F5TzOwDEzneHEW7PT3Ls?p=preview
我发现防止这种情况的唯一方法是为每个SVG使用不同的模式ids
,但是由于所有人都共享同一文件,因此我不喜欢重复全部复制并为此重命名ID的解决方案.我不知道应该有更好的解决方案.
The only way I have found to prevent this is using different pattern ids
for every SVG, but since all share the same file I don't like the solution to duplicate all of them and rename the ids just for this. I wonder there should be a better solution.
推荐答案
我会将模式放在另一个svg元素中:<svg class="defs">
.此svg元素可能具有position:absolute
以及非常小的宽度和高度.如果添加left: -200px;
,则此svg元素不可见.
I would put the patterns in a different svg element: <svg class="defs">
. This svg element may have position:absolute
and a very small width and height. If you add left: -200px;
this svg element is invisible.
也:如果一个SVG元素具有以下CSS规则:.striped-pain-1 {fill: url(#striped-pain-1);}
,则无需将其添加到第二个SVG元素中.实际上,您可以从svg中删除<style>
元素,并将此规则添加到css中.
Also: if one SVG element has this css rule: .striped-pain-1 {fill: url(#striped-pain-1);}
you don't need to add it to the second one. In fact you can delete the <style>
element from the svg and add this rule to the css.
请尝试:单击数字(1,2,3)隐藏或取消隐藏svg元素.
Please try it: click the numbers (1,2,3) to hide or unhide the svg elements.
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>
这篇关于隐藏SVG会影响同一页面中的其他SVG样式的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!