How do I use animateTransform
in an SVG to scale an object from the center point instead of the upper-left corner?
Example:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100px" height="100px">
<circle style="fill:blue;" cx="50" cy="50" r="45">
<animateTransform attributeName="transform"
type="scale"
from="0 0"
to="1 1"
begin="0s"
dur="1s"
repeatCount="indefinite"
/>
</circle>
</svg>
Change your scaling transform to use additive="sum"
and apply an additional transform that translates the circle to the center of the image. So instead of defining the shape at the center of the image, define its center to be 0 0
and then use the transform
attribute to translate it to 50, 50
(the exact center of your particular image).
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100px" height="100px">
<circle style="fill:blue;" cx="0" cy="0" r="45" transform="translate(50 50)">
<animateTransform attributeName="transform"
type="scale"
additive="sum"
from="0 0"
to="1 1"
begin="0s"
dur="1s"
repeatCount="indefinite"
/>
</circle>
</svg>
Here's another example using the defs
and use
tags to reuse the circle definition:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100px" height="100px">
<defs>
<circle id="def-circle" style="fill:blue;" cx="0" cy="0" r="45" />
</defs>
<use xlink:href="#def-circle" transform="translate(50 50)">
<animateTransform attributeName="transform"
type="scale"
additive="sum"
from="0 0"
to="1 1"
beg="0s"
dur="1s"
repeatCount="indefinite" />
</use>
</svg>