jQuery, SVG: How to animate an attribute value (not style property)?
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 dupl开发者_如何学JAVAicate 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 .
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.
For anyone still interested, a jQuery plugin project http://keith-wood.name/svg.html is very useful for animating SVG elements.
精彩评论