Click here to view code image
// Animate an SVG element to a red fill and a black stroke
$svgElement.velocity({ fill: “#ff0000”, stroke: “#000000” });
In contrast, note that the code below would not work since the following CSS properties
are not supported by SVG elements:
Click here to view code image
// Incorrect: These properties don’t apply to SVG elements
$svgElement.velocity({ borderSize: “5px”, borderColor: “#000000” });
Presentational attributes
The presentational attributes explored earlier in this chapter are also animated as expected:
Click here to view code image
// Animate the x and y coordinates of a rectangle
$(“rect”).velocity({ x: 100, y: 100 });
// Animate the cx and cy coordinates of a circle
$(“circle”).velocity({ cx: 100, cy: 100 });
// Animate the dimensions of a rectangle
$(“rect”).velocity({ width: 200, height: 200 });
// Animate the radius of a circle
$(“circ”).velocity({ r: 100 });
All the Velocity features that you’re currently using—animation reversal, UI pack
effects, sequence triggering, and so on—also work as expected with SVG elements.
Positional attributes vs. transforms
You might be wondering what the difference is between using the x, cx, y, and cy
positional attributes instead of CSS transforms (e.g. translateX, translateY) when
specifying the positions of SVG elements. The answer is browser support. Internet
Explorer (up to and including Internet Explorer 11) does not support CSS transforms on
SVG elements. Consider the following:
Click here to view code image
// The x and y attributes work everywhere that SVG elements do (IE8+, Android
3+)
$(“rect”).velocity({ x: 100, y: 100 });
// Alternatively, positional transforms (such as translateX and translateY)
work everywhere except Internet Explorer
$(“rect”).velocity({ translateX: 100, translateY: 100 });
NoteAlthough transforms are known to be particularly performant due to hardware
acceleration (read more on this in Chapter 7, “Animation Performance”), both
approaches to SVG animation are equally fast since SVG graphics are
hardware-accelerated by default.