scale to the right side

Question

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.

Answer 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.