svg - SVG SMIL 动画未按预期运行

Question

有谁知道这个 SVG SMIL 饼图动画的中心有什么问题？

http://jsfiddle.net/frank_o/fj7Xc/

它看起来像这样：

而它应该是这样的：

HTML：

<div class="svg_wrapper">
    <svg viewBox="0 0 600 425">
        <path d="M 175, 175 m 0, -75 a 75,75 0 1,0 0,150 a 75,75 0 1,0 0,-150" fill="none" stroke="black" stroke-width="150" stroke-dasharray="0 600 600 0" stroke-dashoffset="1000">
            <animate attributeType="XML" attributeName="stroke-dashoffset" from="0" to="600" dur="2s" repeatCount="1" fill="freeze" />
        </path>
    </svg>
</div>

Answer 1

在这两种浏览器中，我认为问题归结于这样一个事实，即您正在破解笔画动画技术以尝试以您想要的方式获得填充动画。

这是个问题，因为浏览器并没有准确地计算外圆或内轴心点——他们正在计算官方圆，中间是中间，根据你的屏幕分辨率四舍五入，然后绘制笔画在任一侧。因为行程太大，圆边缘上的小圆角效果会加剧。

不幸的是，除了使用 Javascript 在动画的每一帧计算出饼图的实际路径外，我没有为您提供解决方案。