在同一页面中加载了几次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
,但是由于所有人共享相同的文件,因此我不喜欢将所有这些复制的解决方案重复并为此重命名ID。我想知道应该有一个更好的解决方案。
我会将模式放在其他SVG元素中:<svg class="defs">
。该SVG元素可能具有position:absolute
,宽度和高度很小。如果添加left: -200px;
,此SVG元素是看不见的。
另外:如果一个SVG元素具有此CSS规则:.striped-pain-1 {fill: url(#striped-pain-1);}
您无需将其添加到第二个。实际上,您可以从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>
出现此问题,因为您已经为两个不同元素指定了相同的id
:
<pattern id="striped-pain-1"
在第52和69行。
在HTML id
中应该是唯一的。
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>
可能您可能想摆脱SVG并使用更简单的方式:
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';
}
#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>
您的问题是您正在使用ID ="条纹pain-1"定义SVG路径。两个步骤:首先,从Toogle元素中移出独特的SVG模式,以用作样式,我使用了"#条纹 - pain-Inque"。接下来,用作所需的每个元素中的填充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>