Question

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

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

效果不是很好，因为所有圈子基本上都是彼此重叠的。有没有办法使它按预期工作？

这是甜甜圈代码：

.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>

SVG甜甜圈切片在悬停时更改颜色

1 个答案: