SVG动画在Chrome中具有锯齿状边缘

Question

有人知道为什么这个SVG动画在Chrome中有锯齿状的边缘吗?

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

这是Chrome浏览器的一个bug。已提交。

http://jsfiddle.net/fj7Xc/3/

内部半径应该是光滑的，但它看起来像一个停止标志。

<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>