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

09-10 07:27
查看更多