[英]SVG polygon unable to highlight
I'm trying to highlight a specific polygon inside a SVG, by changing its stroke color.我试图通过更改其笔触颜色来突出显示 SVG 内的特定多边形。
Unfortunately, one side is completely covered by the second polygon's stroke.不幸的是,一侧被第二个多边形的笔划完全覆盖。
I have tried to bring it to the front with z index, but no luck.我试图用 z 索引把它放在前面,但没有运气。
<button id="b1" type="button">1st</button>
<svg viewBox="0 0 1240 1000">
<g>
<polygon class="map__1" id="pol1" points="106.75,266 4,266 4,135 106.75,135 106.75,266" data-id="1">
</polygon>
<polygon class="map__2" points="178.25,168.655 106.75,240 106.75,135 145.75,135 178.25,168.655" data-id="2"></polygon>
</g>
</svg>
js js
let btn1 = document.getElementById("b1");
let pol1 = document.getElementById("pol1");
btn1.addEventListener("click", myFunction);
function myFunction() {
pol1.style.stroke = "#fc0303";
}
css css
.map__1, .map__2 {
stroke: #000;
stroke-width: 5px;
stroke-miterlimit: 10;
fill: #6e6e6e;
}
Here's the fiddle: https://jsfiddle.net/tfzbjxL3/这是小提琴: https : //jsfiddle.net/tfzbjxL3/
I also tried with the outline property, but it doesn't fits on other kind of polygons but squares.我也尝试过使用轮廓属性,但它不适合其他类型的多边形,但不适合正方形。
Is there any way that I could manage to do this?有什么办法可以做到这一点吗?
Thanks!谢谢!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.