有谁知道为什么这个SVG动画在Chrome中有锯齿状边缘?在Firefox中运行得很好。
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 :(得分:0)
这是Chrome中的一个错误。它已经提交。
内半径应该是平滑的但看起来像一个停止。
<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="110"/>
</svg>
</div>