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.

See also jQuery under SVG

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 .

Answer 1

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.