CODEWITHSUNDEEP
csssvg
gespinha
gespinha

Reputation: 8487

Animating the stroke on an SVG shape doesnt work right

I have the following SVG shape:

http://jsfiddle.net/69jf5ohb/

<svg version="1.1"
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
     x="0px" y="0px" width="200" height="200" viewBox="0 0 231.764 251.764" enable-background="new 0 0 231.764 251.764"
     xml:space="preserve">
  <circle id="line" stroke-width="10" stroke-linecap="square" stroke="#000" r="50" cy="55" cx="55" fill="none"></circle>
</svg>

I am trying to make the dashed stroke go round, but as you'll notice in the JSFiddle, the stroke just jumps at some point. Why is this happening? What is make this not work?

I have calculated the diameter of the circle and made it spin from the total length to 0, it should work right.

Upvotes: 2

Views: 41

Answers (2)

Michael Mullany
Michael Mullany

Reputation: 31715

It occurs because your circumference should be an integer multiple of the sum of your stroke dash array lengths. Change stroke dash-array to 10, 21.42; and you'll be set. 10 + 21.42 adds up to 31.42, which multiplied by 10 - is the circumference of your circle.

(But wouldn't it be easier to use a transform rotate?)

Upvotes: 3

El Danielo
El Danielo

Reputation: 780

Try to change stroke-dasharray: to 10, 24.85;

#line{
  stroke-dasharray: 10, 24.85;
  stroke-dashoffset: 314;
  -webkit-animation: dash 14s linear infinite;
}
body{
  background: #fff;
}

@keyframes dash{
  to {
    stroke-dashoffset: 0;
  }
}
<svg version="1.1"
	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
	 x="0px" y="0px" width="200" height="200" viewBox="0 0 231.764 251.764" enable-background="new 0 0 231.764 251.764"
	 xml:space="preserve">
  <circle id="line" stroke-width="10" stroke-linecap="square" stroke="#000" r="50" cy="55" cx="55" fill="none"></circle>
</svg>

Upvotes: 2

Related Questions