我有一个简单的 SVG donut ,其中有 5 个相等的切片,使用 stroke-dashoffset="xx"放置。 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>
最佳答案
当您位于圆的半径之外时,浏览器会突出显示正确的线段。然而,当指针位于圆半径内时,浏览器认为您是 将鼠标悬停在左下部分。这对应于 SVG 文件中的最后一个圆圈。
您之所以获得此效果,是因为您已将圆圈的填充
设置为透明
。当设置为 none
时,SVG 的悬停测试只会忽略 fill
或 lines
。它们不被视为等同。
有两种方法可以解决您的问题:
<强>1。将圆圈的填充颜色更改为“无”
.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 donut 切片在悬停时改变颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51359782/