Question

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

Answer 1

使用this.style.fill和this.style.stroke

<html>
<head>
</head>
<body>
<svg viewBox="0 0 220 100" xmlns="http://www.w3.org/2000/svg">
 <rect x="120" width="100" height="100" rx="15" fill="red" onclick="this.style.fill = 'red';this.style.stroke = 'black';" />
</svg>
</body>
</html>

Answer 2

您可以使用多段线两次。折线第一次变宽并具有笔触不透明度=“ 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>

如何突出显示SVG折线

2 个答案: