将SVG工具提示添加到<；圆圈/>；

我正在用svg创建一个甜甜圈图表，我想在甜甜圈的悬停上有工具提示。我正在制作这样的甜甜圈：

.container{
显示器：flex；
柔性流：行换行；
}
.卡片{
宽度：20em；
高度：20em；
填料：2米；
背景色：白色；
边缘：2米；
盒影：0 0 5px#222；
}
.馅饼中心{
背景：透明；
边界半径：50%；
变换：旋转（-90度）；
}
.圆圈1{
填充：透明；
笔画：水鸭；
笔画宽度：7；
行程：30-70；
}
.圆圈2{
填充：透明；
中风：橙色；
笔画宽度：7；
行程：4555；
行程偏移：-30；
}
.圆圈3{
填充：透明；
笔画：兰花；
笔画宽度：7；
行程：20-80；
行程偏移：-75；
}
.圆圈4{
填充：透明；
笔画：黄绿色；
笔画宽度：7；
行程：595；
行程偏移：-95；
}

---

使用fill:none而不是fill:transparent，以便填充不会发生反应。事实上，使用fill:transparent确实没有什么好的理由

.container{
显示器：flex；
柔性流：行换行；
}
.卡片{
宽度：20em；
高度：20em；
填料：2米；
背景色：白色；
边缘：2米；
盒影：0 0 5px#222；
}
.馅饼中心{
背景：无；
边界半径：50%；
变换：旋转（-90度）；
}
.圆圈1{
填充：无；
笔画：水鸭；
笔画宽度：7；
行程：30-70；
}
.圆圈2{
填充：无；
中风：橙色；
笔画宽度：7；
行程：4555；
动画：dash3 1向前移动0 s 1；
行程偏移：-30；
}
.圆圈3{
填充：无；
笔画：兰花；
笔画宽度：7；
行程：20-80；
动画：dash2 1向前移动0 s 1；
行程偏移：-75；
}
.圆圈4{
填充：无；
笔画：黄绿色；
笔画宽度：7；
行程：595；
动画：破折号1向前移动0秒1；
行程偏移：-95；
}

非常感谢您！！我试图用路径（这是一种更困难的方式）来重新创建它。我永远不会知道使用

fill:none

而不是

fill:transparent

。谢谢你，先生。我也有同样的问题，刚刚读了这个。谢谢罗伯特·朗森，这真的很有帮助。