SVG - scale an image to make it grow/shink from a centre point

[EoinStronge]

Hi,

I'm struggling trying to make an image expand and shrink (like a 'pulse' effect) with SVG, using the transformAnimation element. Rather than pulse with the image staying centred in the screen, the image shifts towards the top left of the screen as it shrinks (or expands from the top left towards the right etc.), I would like it to scale on the centre point of the image.

I expect it is quite easy with the correct know-how, but I can't find the info on the Fitbit site and the info online in other SVG discussions often seem to refer to attributes such as additive="sum" that are not supported by the SDK. 

I've been playing around with the mark-up for a while already and tried a whole bunch of stuff, this is my latest:

<svg>
  <defs>
    <symbol id="myImage">
      <g pointer-events="visible" transform="translate(44,25)">
        <animateTransform attributeType="scale" from="0.8" to="1" begin="enable" dur="1" easing="ease-in-out" repeatCount="indefinite"/>
        <image x="0" y="0" width="260" height="196" href="heartImage.png" />
      </g>
    </symbol>
  </defs>
  <svg width="260" height="196">
    <use id="imageInstance" href="#myImage" width="100%" height="100%" />
  </svg>
</svg>

I kick it off then with:

document.getElementById("imageInstance").animate("enable");

Additionally, is it possible to modify (from JavaScript) the 'dur' attribute value to speed up or slow down the image scaling effect?

Thanks.

[bhwolf]

Did you ever get this figured out? I've got a very similar problem, and the way I'd solve it unfortunately isn't supported.  If I find a solution, I'll post one!

[Gondwana]

I haven't tried anything like this, but it sounds to me like the position of the image (ie, the left top corner) isn't being changed. You need to change the position as well as the scale (but at half the amount).

To access dur, try setting an id for the animateTransform element. Once again, I haven't tested this.

[EoinStronge]

Not yet. When I get a chance I'll try putting a 2nd animate transform in to try to move the image at the same time as scaling it, as per catplace's suggestion below. Will update here if I get it working correctly.

[cbaldasa2]

Posting a reply in case you are still struggling with this, I found the solution today.

I found this example from the official website.  If you establish a center with:

<g transform="translate(50%,50%)" >

and similar to excel you can use '$' to reference that center

<svg viewport-fill="lightblue">
  <g pointer-events="visible" transform="translate(50%,50%)">
    <animateTransform attributeType="rotate" from="0" to="360" begin="click" dur="3" />
    <rect x="$-50" y="$-50" width="100" height="100" fill="red" />
  </g>
</svg>