我想知道是否可以通过单击来突出显示折线。
像这样:
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>