jQuery Forum

The attr function replaces the value of the named attribute - it doesn't extend it. You could retrieve the current value and then set the combined value:

1. var img = $('#img', svg.root());
2. var xform = img.attr('transform');
3. img.attr('transform', xform + ' scale(' + myScale ')');

If you are going to vary the same transformations often you might need to attach a data object to the element to keep track of the current settings.

Can you tell me what to do here.I mean how can I attache a data object to the element?

Please elaborate with some examples.

TIA

Yogi Yang

Use the data function to attache and retrieve information for an element. Something like this:

1. var img = $('#img', svg.root());
2. initTransform(img);
3. ...
4. img.attr('transform', setTransform(img, 10, 20, -1));
5. 
   
6. function initTransform(elem) {
7.       elem.data('transform', {x: 0, y: 0, scale: 1});
8. }
9. 
   
10. function setTransform(elem, x, y, scale) {
11.       var transform = elem.data('transform');
12.       transform.x += (x || 0);
13.       transform.y += (y || 0);
14.       transform.scale *= (scale || 1);
15.       elem.data('transform', transform);
16.       return 'translate(' + transform.x + ' ' + transform.y + ') scale(' + transform.scale + ')';
17. }