0

I'm trying an animation where a rectangle scales from 1 to 3 and then should scale back to 1. But, the catch is the scaling should begin at top left corner and end at top right corner.

<rect x="10" y="10" width="40" height="20"
      style="stroke: #000000; fill: none;">
    <animateTransform attributeName="transform" attributeType="XML"
                      type="scale"
                      from="1" to="3"
                      begin="0s" dur="10s"
                      additive="sum"
            />
</rect>

I want to achieve this in pure SVG tags and no D3 or raphael.js. How can this be achieved? I have tried many ways, but had got no good output.

Sanjeev
  • 1,838
  • 1
  • 16
  • 28
  • Not quite sure what you mean by scale should end up at top right corner. Do you have an example visually to look at somewhere ? – Ian Nov 25 '13 at 10:09

1 Answers1

1

Not quite sure if this is the effect you are after, you may need to clarify the description a little. But you could combine animations, and start one when another finishes with the begin tag... jsfiddle here... http://jsfiddle.net/kSYHH/ and http://jsfiddle.net/kSYHH/3/

<svg>
  <rect x="10" y="10" width="40" height="20"
      style="stroke: #000000; fill: none;">
    <animateTransform attributeName="transform" attributeType="XML"
                  type="translate"
                  from="0" to="40"
                  begin="animout.end" dur="3s"
                  additive="sum"
                  fill="freeze"
      />

     <animateTransform attributeName="transform" attributeType="XML"
                  id="animout"
                  type="scale"
                  from="1" to="3"
                  begin="0s" dur="3s"
                  additive="sum"
     />
     <animateTransform attributeName="transform" attributeType="XML"
                  type="scale"
                  from="3" to="1"
                  begin="animout.end" dur="3s"
                  additive="sum"
                  fill="freeze"
     /> 


  </rect>
</svg>

Its also worth anyone else looking into svg libs like Raphael.js Snap.js Pablo.js which make some bits easier, although you do mention you want to make it pure svg as such.

Ian
  • 13,724
  • 4
  • 52
  • 75
  • thank you for this. your code gave me 90% of what i need. see this http://jsfiddle.net/kSYHH/2/. at the end, the rect should not show up again.that's what i need. – Sanjeev Nov 27 '13 at 08:08
  • to help, i'm making an UFO path kind of animation. at begin, it will move into the frame from left and at the end it just disappears into infinity. – Sanjeev Nov 27 '13 at 08:09
  • 1
    To make it disappear, on the last animation you can just add fill="freeze", like this amended fiddle http://jsfiddle.net/kSYHH/3/ If you are doing more complex animations, you may want to look into something like Raphael, snap.svg, Pablo.js etc – Ian Nov 27 '13 at 09:26
  • thank you! that's what i need. can you update your answer and i shall mark it as valid answer. – Sanjeev Nov 27 '13 at 10:27