CODEWITHSUNDEEP
htmlanimationsvg
Sreejith Sasidharan
Sreejith Sasidharan

Reputation: 1368

svg animate - set a custom starting position

I was using the SVG animate element to animate a rectangle using the following code.

UPDATED CODE

 <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="100%" height="100%" viewBox="0 0 1600 700" enable-background="new 0 0 1600 700" xml:space="preserve">
  <g>
    <rect x="200" y="10" width="100" height="100">
      <animate attributeType="XML" attributeName="x" from="-100" to="100%"
               dur="10s" repeatCount="indefinite"/>
    </rect>
  </g>
</svg>

The animation starts from -100 and then moves all way to 100% of the svg element. How do I make the rectangle starts the animation from the x position defined in it (x="200") then goes to the right end of the screen and comes back from the left side in a continuous loop animation?

Also, How do I show the SVG element to the 100% width of the screen (Like a bootstrap fluid container)?

Thanks in advance.

Upvotes: 1

Views: 1143

Answers (1)

Paul LeBeau
Paul LeBeau

Reputation: 101820

Instead of from and to, use values instead. values takes a semicolon-separated list of the values you want it to animate between.

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="100%" height="100%" viewBox="0 0 1600 700" enable-background="new 0 0 1600 700" xml:space="preserve">
  <g>
    <rect x="200" y="10" width="100" height="100">
      <animate attributeType="XML" attributeName="x" values="-100;100%;-100"
               dur="10s" repeatCount="indefinite"/>
    </rect>
  </g>
</svg>

Update

To have the animation start at the squares current position exit to the right, then reenter on the left, we need to have a two stage animation.

The first stage is to have the square move to the right and exit. The second stage is a looping animation that starts off the LHS and goes the full width.

To get the second stage to start when the first finishes, we set the begin arttribute to firststage.end. This is what is known as a "sync base" value. "firststage" is the id of the first stage animation element.

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="100%" height="100%" viewBox="0 0 1600 700" enable-background="new 0 0 1600 700" xml:space="preserve">
  <g>
    <rect x="200" y="10" width="100" height="100">
      <animate attributeType="XML" attributeName="x" to="100%"
               dur="8.2s" id="firststage"/>
      <animate attributeType="XML" attributeName="x" from="-100" to="100%"
               dur="10s" repeatCount="indefinite" begin="firststage.end"/>
    </rect>
  </g>
</svg>

Notice that we have adjusted the duration of the first stage. It has less distance to travel, so we need to reduce its running time so that the square doesn't appear to fun faster in the second stage.

((1600-200) / (1600-(-100))) * 10s = 8.2s

Upvotes: 2

Related Questions