SVG donut 切片在悬停时改变颜色

Question

我有一个简单的 SVG donut ，其中使用 stroke-dashoffset="xx"放置了 5 个相等的切片。 donut 本身看起来不错，但是当我尝试为每个切片添加一些悬停更改时，例如，简单更改笔触颜色:

donut-piece:hover {
  stroke: #fc7822;
}

由于所有圆圈基本上都在彼此之上，因此效果不佳。有没有办法让它按预期工作？

这是 donut 代码:

.donut-piece:hover {
  stroke: #fc7822;
}

<svg width="700" viewBox="0 0 42 42" class="donut">
   <circle class="donut-hole" cx="21" cy="21" r="15.91549430918954" fill="transparent"></circle>
   <circle class="donut-ring" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="transparent" stroke-width="10"></circle>

   <circle class="donut-data donut-piece" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="#535f7f" stroke-width="10" stroke-dasharray="15 85" stroke-dashoffset="3"></circle>
   <circle class="donut-device donut-piece" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="#556180" stroke-width="10" stroke-dasharray="15 85" stroke-dashoffset="18"></circle>
   <circle class="donut-physical donut-piece" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="#51628f" stroke-width="10" stroke-dasharray="15 85" stroke-dashoffset="33"></circle>
   <circle class="donut-network donut-piece" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="#556180" stroke-width="10" stroke-dasharray="15 85" stroke-dashoffset="48"></circle>
   <circle class="donut-iot donut-piece" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="#535f7f" stroke-width="10" stroke-dasharray="15 85" stroke-dashoffset="63"></circle>

</svg>

Answer 1

当您在圆的半径之外时，浏览器会突出显示正确的线段。但是当指针在圆半径内时，浏览器认为你是
悬停在左下部分。这对应于 SVG 文件中的最后一个圆圈。

你得到这个效果是因为你设置了 fill您圈子的成员发送至 transparent . SVG 的悬停测试只会忽略 fill或 stroke当它设置为 none .它们不被视为等效。

有两种方法可以解决您的问题:

1. 将圆圈的填充颜色更改为 "none"

.donut-piece:hover {
  stroke: #fc7822;
}

<svg width="700" viewBox="0 0 42 42" class="donut">
   <circle class="donut-hole" cx="21" cy="21" r="15.91549430918954" fill="transparent"></circle>
   <circle class="donut-ring" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="transparent" stroke-width="10"></circle>

   <circle class="donut-data donut-piece" cx="21" cy="21" r="15.91549430918954" fill="none" stroke="#535f7f" stroke-width="10" stroke-dasharray="15 85" stroke-dashoffset="3"></circle>
   <circle class="donut-device donut-piece" cx="21" cy="21" r="15.91549430918954" fill="none" stroke="#556180" stroke-width="10" stroke-dasharray="15 85" stroke-dashoffset="18"></circle>
   <circle class="donut-physical donut-piece" cx="21" cy="21" r="15.91549430918954" fill="none" stroke="#51628f" stroke-width="10" stroke-dasharray="15 85" stroke-dashoffset="33"></circle>
   <circle class="donut-network donut-piece" cx="21" cy="21" r="15.91549430918954" fill="none" stroke="#556180" stroke-width="10" stroke-dasharray="15 85" stroke-dashoffset="48"></circle>
   <circle class="donut-iot donut-piece" cx="21" cy="21" r="15.91549430918954" fill="none" stroke="#535f7f" stroke-width="10" stroke-dasharray="15 85" stroke-dashoffset="63"></circle>

</svg>

2. 告诉浏览器忽略鼠标事件的填充

您可以通过设置 pointer-events: visibleStroke; 来做到这一点。 . pointer-events 的默认值是 visiblePainted , 测试填充和描边。

You can read more about pointer-events here .

.donut-piece {
  pointer-events: visibleStroke;
}

.donut-piece:hover {
  stroke: #fc7822;
}

<svg width="700" viewBox="0 0 42 42" class="donut">
   <circle class="donut-hole" cx="21" cy="21" r="15.91549430918954" fill="transparent"></circle>
   <circle class="donut-ring" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="transparent" stroke-width="10"></circle>

   <circle class="donut-data donut-piece" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="#535f7f" stroke-width="10" stroke-dasharray="15 85" stroke-dashoffset="3"></circle>
   <circle class="donut-device donut-piece" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="#556180" stroke-width="10" stroke-dasharray="15 85" stroke-dashoffset="18"></circle>
   <circle class="donut-physical donut-piece" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="#51628f" stroke-width="10" stroke-dasharray="15 85" stroke-dashoffset="33"></circle>
   <circle class="donut-network donut-piece" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="#556180" stroke-width="10" stroke-dasharray="15 85" stroke-dashoffset="48"></circle>
   <circle class="donut-iot donut-piece" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="#535f7f" stroke-width="10" stroke-dasharray="15 85" stroke-dashoffset="63"></circle>

</svg>