The KUTE.js Attributes Plugin extends the core engine and enables animation for any numeric presentation attribute, with or without a measurement unit or what we know as suffix. The plugin can be a great asset for creating complex animations in combination with the SVG Plugin as we'll see in the following examples. As a quick refference, the basic synthax goes like this:
// basic synthax for unitless properties
var myAttrTween = KUTE.to('selector', {attr: {attributeName: 75}});
// OR for attributes that are ALWAYS suffixed / have a measurement unit
var mySufAttrTween = KUTE.to('selector', {attr:{attributeName: '15%'}});
Currently the Attributes Plugin does not support color properties such as fill or stroke as well as properties with multiple values like stroke-dasharray, viewBox or transform for simplicity reasons. Still, you have access to just about any SVGElement/Element presentation attribute available.
In the first example, let's play with the attributes of a <circle> element: radius and center coordinates.
// radius attribute
var radiusTween = KUTE.to('#circle', {attr: {r: 75}});
// coordinates of the circle center
var coordinatesTween = KUTE.to('#circle', {attr:{cx:0,cy:0}});
A quick demo with the above:
Similar to the example on gradients with SVG Plugin, we can also animate the gradient positions, but make sure to always include the % suffix:
// gradient positions to middle
var closingGradient = KUTE.to('#gradient', {attr: {x1:'49%', x2:'49%', y1:'49%', y2:'49%'}});
// gradient positions rotated
var rotatingGradient = KUTE.to('#gradient', {attr: {x1:'49%', x2:'51%', y1:'51%', y2:'51%'}});
This plugin is quite handy and a great addition to the SVG Plugin.