javascript - 如何突出显示 SVG 折线

Question

我想知道是否有一种方法可以通过单击来突出折线。像这样: Before click After click

Answer 1

您可以使用折线两次。第一次折线更宽并且笔划不透明度为“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>