我想知道是否有一种方法可以通过单击来突出折线。 像这样: Before click After click
最佳答案
您可以使用折线两次。第一次折线更宽并且笔划不透明度为“0”。当您将鼠标悬停在该组上时,第一条折线会将其笔触不透明度更改为 .5
g:hover use:nth-of-type(1){stroke-opacity:.5}
<svg width="548" viewBox="0 0 548 406" >
<defs>
<polyline id="thePolyline" fill="none" points="148.25,20 148.25,217 141.05,249.5 113.15,278.301 72.65,287.301 48.35,259.401 32.15,211.701 32.116,162.201 43.850,119.901 79.85,90.201 123.95,70.4 172.55,55.1 222.95,53.3 274.25,55.101 319.25,54.2 340.851,54.2 381.351,71.3"/>
</defs>
<g>
<use xlink:href="#thePolyline" stroke="#0C47EA" stroke-width="20" stroke-opacity="0" />
<use xlink:href="#thePolyline" stroke="#0C47EA" stroke-width="9" />
</g>
</svg>
关于javascript - 如何突出显示 SVG 折线,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57893539/