SVG Plugin is broken in 1.5.4, now fixed for 1.5.5

Doc Updates for c6e7caabc6
This commit is contained in:
thednp 2016-09-20 13:57:05 +03:00
parent 56a0045f89
commit b83bb95a1e
7 changed files with 23 additions and 8 deletions

View file

@ -1,6 +1,6 @@
{
"name": "KUTE.js",
"version": "1.5.4",
"version": "1.5.5",
"homepage": "http://thednp.github.io/kute.js",
"authors": [
"thednp"

View file

@ -81,7 +81,8 @@ img {
border: 0;
}
svg:not(:root) {
overflow: hidden;
/*overflow: hidden;*/
overflow: visible;
}
figure {
margin: 1em 40px;

View file

@ -83,15 +83,25 @@
<h2>Attributes Plugin</h2>
<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 <a href="svg.html">SVG Plugin</a> as we'll see in the following examples. As a quick refference, the basic synthax goes like this:</p>
<pre><code class="language-javascript">// basic synthax for unitless properties
<pre><code class="language-javascript">// basic synthax for unitless attributes
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%'}});
</code></pre>
<p>Currently the Attributes Plugin does not support color properties such as <code>fill</code> or <code>stroke</code> as well as properties with multiple values like <code>stroke-dasharray</code>, <code>viewBox</code> or <code>transform</code> for simplicity reasons. Still, you have access to just about any SVGElement/Element presentation attribute available.</p>
<p>The Attributes Plugin does not support color attributes such as <code>fill</code> or <code>stroke</code> as well as 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 <a href="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 <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute" target="_blank">presentation attribute</a> available.</p>
<h3>Attributes Namespace</h3>
<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>
<pre><code class="language-javascript">// dashed attribute notation
var myDashedAttrStringTween = KUTE.to('selector', {attr: {'stroke-width': 75}});
// non-dashed attribute notation
var myNonDashedAttrStringTween = KUTE.to('selector', {attr:{strokeWidth: '15px'}});
</code></pre>
<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>Unitless Properties</h3>
<p>In the first example, let's play with the attributes of a <code>&lt;circle&gt;</code> element: radius and center coordinates.</p>
<pre><code class="language-javascript">// radius attribute
@ -112,7 +122,7 @@ var coordinatesTween = KUTE.to('#circle', {attr:{cx:0,cy:0}});
</div>
<h3>Suffixed Properties</h3>
<p>Similar to the example on gradients with <a href="svg.html">SVG Plugin</a>, we can also animate the gradient positions, but make sure to always include the <code>%</code> suffix:</p>
<p>Similar to the example on gradients with <a href="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><code class="language-javascript">// gradient positions to middle
var closingGradient = KUTE.to('#gradient', {attr: {x1:'49%', x2:'49%', y1:'49%', y2:'49%'}});

View file

@ -526,4 +526,6 @@
return c;
}
return S;
}));

File diff suppressed because one or more lines are too long

View file

@ -526,4 +526,6 @@
return c;
}
return S;
}));

View file

@ -1,6 +1,6 @@
{
"name": "kute.js",
"version": "1.5.4",
"version": "1.5.5",
"description": "A minimal Native Javascript animation engine.",
"main": "kute.js",
"scripts": {