是否可以根据百分比从下到上设置SVG圆形填充颜色？

如何根据百分比填充下面的圆圈

---

提前感谢。

最简单的方法是创建一个带有圆孔的遮罩，然后在其后面设置一个矩形的动画。例如：

<svg viewbox="-20 -20 100 100">

  <circle r="15.29563" cx="0" stroke="#7dc4c2" fill="#5ea4a2">

</svg>

这将围绕SVG图像的中间旋转坐标系，以便在增加其高度时矩形向上增长。在这里，我使用CSS转换来更改鼠标悬停在矩形上时矩形的高度。但是您可以使用Javascript或JQuery将高度更改为您想要的任何值

下面是一个工作示例：

svg#fillup{height:0px；transition:height 0.5s；}
svg:hover#fillup{height:160px；}

---

您可以使用带有“停止不透明度”的渐变来完成此操作。 您将分别添加两个不透明度为0和1的“中间”挡块，并将两者的偏移量设置为所需的百分比

谢谢，霍尔格会。。。你是svg中的野兽……有没有办法用css做到这一点？我用了你的例子，很喜欢，但后来我发现IE不支持SMILwant动画，直到60%。如何做到这一点？不要使用

values=“0；1；0”

对这两个动画都使用

values=“0；0.6；0”

。感谢您回答这个尖锐的问题。

<path fill="#fff" fill-rule="evenodd"
        d="M0 0 200 0 200 200 0 200ZM20 100 A80 80 0 0 0 180 100 80 80 0 0 0 20 100Z"/>

<rect transform="rotate(180 100 100)" x="20" y="20" width="160" height="0" fill="#47f" id="fillup"/>