有谁知道这个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>
答案 0 :(得分:2)
在这两种浏览器中,我认为问题归结为这样一个事实:你正在攻击一个笔画动画技术,试图以你想要的方式动画填充。
这是一个问题,因为浏览器并没有准确地计算外圈或内枢轴点 - 他们正在计算官方圈,介于两者之间,根据分辨率将其四舍五入。你的屏幕,然后在两边绘制笔划。因为行程太大,圆形边缘的小圆角效应会加剧。
不幸的是,除了使用Javascript计算动画的每一帧中的饼图的实际路径之外,我没有为您提供解决方案。