SVG SMIL animation not behaving as expected

1
votes

Does anyone know what's wrong with the center of this SVG SMIL pie animation?

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

It appears like this:

enter image description here

Whereas it should be appearing like this:

enter image description here

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>
1
svgsmil
This looks fine in Chrome, but looks off in firefox. In that case, firefox bug. – Michael Mullany
Hi! Actually I took that screenshot in Chrome. Could you take a quick screenshot yourself? – Mark Boulder
Ah my mistake - it's there in my Chrome too although not that noticeable. In Firefox, it's very noticeable. A bigger problem is that the resulting shape isn't round in Chrome, it's a little squarish – Michael Mullany

1 Answers

2
votes

In both browsers, I think the problem comes down to the fact that you are hacking a stroke animation technique to try to get the fill animated the way you want.

That's a problem, because the browsers aren't calculating either the outer circle or the inner pivot point exactly -- they are calculating the official circle, halfway in between, rounding it off according to the resolution of your screen, and then drawing the stroke on either side. Because the stroke is so large, the little rounding effects on the edge of the circle get exacerbated.

Unfortunately, I don't have a solution for you except to use Javascript to calculate out the actual path for a pie-piece at each frame of the animation.