Web Animation using JavaScript: Develop & Design (Develop and Design)

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 });

    Note

Although    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.