SVG SMIL 动画未按预期运行答案

【问题标题】：SVG SMIL animation not behaving as expectedSVG SMIL 动画未按预期运行
【发布时间】：2014-07-22 05:46:18
【问题描述】：

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

看起来像这样：

而它应该是这样的：

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>

【问题讨论】：

这在 Chrome 中看起来不错，但在 Firefox 中看起来不太好。在这种情况下，Firefox 错误。
嗨！实际上，我在 Chrome 中截取了该屏幕截图。你能自己快速截图吗？
啊，我的错误——它也在我的 Chrome 中，虽然不那么明显。在 Firefox 中，这一点非常明显。更大的问题是在 Chrome 中生成的形状不是圆的，它有点方

标签： svg smil

【解决方案1】：

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

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

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

【讨论】：

谢谢。确实这是以前的解决方案，我很高兴您有洞察力建议使用它：jsfiddle.net/frank_o/gFnw9/19 -- 不幸的是，它比简单的 SMIL 复杂得多，我真的希望有办法解决它。
我和一个朋友刚刚提交了crbug.com/395474 -- 你认为这两者有什么关系吗？
我认为是这样，尽管您在错误报告中的示例已经足够极端了，但我不确定舍入错误是否可以证明这一点！