jQuery, SVG: How to animate an attribute value (not style property)?

Question

I need to animate an attribute of an SVG element, which has no CSS counterpart - <circle cx="..." /> How can I achieve that?

Or, I can use an alternative, e.g. if I could animate <g/> using CSS's top or similar.

Any experience?

Thanks, Ondra

Note this is not a duplicate of How can I animate an attribute value (not style property) with jQuery? since that's about HTML.

Update

In the end, I did a manual animation as in SVG draggable using JQuery and Jquery-svg .

jQuery solution still welcome.

Anyway, that brought me to other problem - units mismatch. evt.clientX is in pixels, but circle.cx.baseVal.value is in some relative units. So when I do

    onmousedown="
      this.moving=true; 
      this.pt0 = {x: evt.clientX, y: evt.clientY}; 
      this.origPos = {x: this.cx.baseVal.value, y: this.cy.baseVal.value};
    "
 onmouseup="this.moving=false;"
 onmouseout="this.moving=false;"
 onmouseover="this.moving=false;"
 onmousemove="if( this.moving ){
   this.cx.baseVal.value = this.origPos.x + (evt.clientX - this.pt0.x);
 }

And have <embed> 3x larger than the SVG's "own" size, then the circle moves 3x faster than the pointer.

Update

I even tried

this.origPos = {
    x: this.cx.baseVal.convertToSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PX), 
    y: this.cy.baseVal.convertToSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PX)
};

...


this.cx.baseVal.newValueSpecifiedUnits(
   SVGLength.SVG_LENGTHTYPE_PX, this.origPos.x + (evt.clientX - this.pt0.x) );

But convertToSpecifiedUnits() returns undefined, which seems to be a lack in implementation of http://www.w3.org/TR/SVG/types.html#InterfaceSVGLength .

score 2 · Answer 1 · answered Aug 17 '10 at 08:06

2

jQuery itself might not meet your requirements for simple svg drag&drop (at this time), so you either have to make it do what you want or use another js framework. I'd recommend having a look at raphaël for example.

The values from event.clientX/Y are not in user units, they need to be converted. See e.g http://www.codedread.com/code.php#dragsvg for an example of dragging svg objects.

answered Aug 17 '10 at 08:06

Erik Dahlström

59,452
12
120
139

Thanks Erik. Actually, I made jQuery to work, but only for CSS properties. I'll have a look if it's easy to make it animate element's props. The result shall be a graph visualisation with nodes and navigation (load new nodes, hide some current). Will Rapael help to achieve this? – Ondra Žižka Aug 17 '10 at 16:01
It's probably not that hard to get it to animate attributes, though there are some that require more work e.g path animations. If you're looking for code we have some examples over on http://svg-wow.org (CC0 licensed) that may be of help. E.g look at the animation done [here][1] (based on YUI2 extensions). [1] http://svg-wow.org/animations/svg-wow.html – Erik Dahlström Aug 17 '10 at 18:30

score 1 · Answer 2 · answered May 09 '12 at 17:07

1

For anyone still interested, a jQuery plugin project http://keith-wood.name/svg.html is very useful for animating SVG elements.

answered May 09 '12 at 17:07

Gerard

2,832
3
27
39

jQuery, SVG: How to animate an attribute value (not style property)?

Update

Update

2 Answers2