<p>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 <ahref="svg.html">SVG Plugin</a> as we'll see in the following examples. As a quick refference, the basic synthax goes like this:</p>
<p>The Attributes Plugin does support color attributes such as <code>fill</code> or <code>stroke</code> starting with KUTE.js v1.5.8, but doesn't support attributes with multiple values like <code>stroke-dasharray</code>, <code>viewBox</code> or <code>transform</code> for simplicity reasons. To animate the stroke/fill or transform attribute, the <ahref="svg.html">SVG Plugin</a> has some handy solutions for you. Despite the limitations of this plugin, you have access to just
about any SVGElement/Element <ahref="https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute"target="_blank">presentation attribute</a> available.</p>
<p>Starting with KUTE.js version 1.5.5, the Attributes Plugin can handle all possible single value attributes with both dashed string and non-dashed string notation. Let's have a look at an example so you can get the idea:</p>
<p>The <code>strokeWidth</code> example is very interesting because this attribute along with many others can work with <code>px</code>, <code>%</code> or with no unit/suffix.</p>
<h3>Color Attributes</h3>
<p>Starting with KUTE.js version 1.5.7, the Attributes Plugin can also animate color attributes: <code>fill</code>, <code>stroke</code> and <code>stopColor</code>. If the elements are affected by their CSS counterparts, the effect is not visible,
so always make sure you know what you're doing.</p>
<pre><codeclass="language-javascript">// some fill rgb, rgba, hex
<p>Similar to the example on gradients with <ahref="svg.html">SVG Plugin</a>, we can also animate the gradient positions, and the plugin will make sure to always include the suffix for you, as in this example the <code>%</code> unit
is found in the current value and used as unit for the DOM update:</p>
<pre><codeclass="language-javascript">// gradient positions to middle
<p>This plugin is quite handy and a great addition to the <ahref="svg.html">SVG Plugin</a>.</p>
</div>
<ulid="share"class="nav">
<li>Share </li>
<liclass="hidden-xs"><atarget="_blank"href="https://www.facebook.com/sharer/sharer.php?u=http://thednp.github.io/kute.js/index.html"title="Share KUTE.js on Facebook"><spanclass="ion-social-facebook-outline icon"></span></a></li>
<liclass="hidden-xs"><atarget="_blank"href="https://twitter.com/home?status=Spread the word about %23KUTEJS animation engine by @dnp_theme and download here http://thednp.github.io/kute.js/index.html"title="Share KUTE.js on Twitter"><spanclass="icon ion-social-twitter-outline"></span></a></li>
<liclass="hidden-xs"><atarget="_blank"href="https://plus.google.com/share?url=http://thednp.github.io/kute.js/index.html"title="Share KUTE.js on Google+"><spanclass="icon ion-social-googleplus-outline"></span></a></li>
</ul>
<!-- FOOTER -->
<footer>
<divclass="content-wrap">
<pclass="pull-right"><aid="toTop"href="#">Back to top</a></p>