CODEWITHSUNDEEP
svgsmil
Mark Boulder
Mark Boulder

Reputation: 14277

SVG SMIL animation not behaving as expected

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>

Upvotes: 1

Views: 99

Answers (1)

AmeliaBR
AmeliaBR

Reputation: 27544

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.

Upvotes: 2

Related Questions