scale using Javascript

[skiddy56]

Does anyone have a working example of scaling using javascript?  The documentation is at best, incomplete.  I have seen this line from the documentation referenced in several posts:

demoinstance.groupTransform.scale.x = 100;

No one seems to have gotten it to work or at least haven't posted that they have.  This line errors out with a null reference.  There's no reference for groupTransform.

I tried assigning an id to the animateTransform element and then referencing that element:

<animateTransform id="atr" attributeType="scale" begin="enable" dur="1"/>

...

var atr = document.getElementById("atr");
atr.from=1;
atr.to=3;
This runs to completion, no errors.  But also no scale transformation.

Any ideas?

Thanks, Rich

[EWR]

<g pointer-events="visible">
      <animateTransform id="atr" attributeType="scale" from="1" to="3" begin="enable" dur="1"/>
      <the element you want to scale/>
</g> 

[skiddy56]

Sorry about the really delayed response!  I figured out how to get around what I couldn't get working.  I should have been clearer in my original question - I was wondering if anyone was able to change the transformation parameters from within Javascript.  For example, in your example the transformation's duration is "1".  Is there anyway to change that to "3", from Javascript?  The documentation seems to say that we should be able to do that.  But I have not been able to get it to work.  In the example below, the statement :

demoinstance.groupTransform.translate.x = 20;

does not work.  There's no groupTransform object.

At this point I'm more curious than anything else.  If it doesn't work, lets remove that section.

Thanks, Rich

From the Animation Guide:

Transformations

Developers can manipulate <g> element transformations using JavaScript to manually translate, scale, and rotate elements.

Translation Animation

import document from "document";

// Get a handle on the <g> instance
var demoinstance = document.getElementById("demoinstance");

demoinstance.groupTransform.translate.x = 20;
demoinstance.groupTransform.translate.y = 20;

Scaling Animation

import document from "document";

// Get a handle on the <g> instance
var demoinstance = document.getElementById("demoinstance");

demoinstance.groupTransform.scale.x = 100;
demoinstance.groupTransform.scale.y = 100;

Rotation Animation

import document from "document";

// Get a handle on the <g> instance
var demoinstance = document.getElementById("demoinstance");

demoinstance.groupTransform.rotate.angle = 45;

[rlhilton59]

I am not doing animation, but I have been able to scale a "g" object from Javascript using

demoinstance.groupTransform.scale.x = 0.5;

But this strangely scales both x and y directions.  The "..scale.y" version does only scale the y direction as you would expect.  In my case, I wanted to only scale the x direction so I had to use both like this:

demoinstance.groupTransform.scale.x = 0.5;
demoinstance.groupTransform.scale.y = 1;

The "scale.x" sets the x scale as I wanted, but also the y is scaled.  So I used "scale.y" to put the y scale back to normal (1).