SVG Plugin is broken in 1.5.4, now fixed for 1.5.5
Doc Updates for c6e7caabc6
This commit is contained in:
parent
56a0045f89
commit
b83bb95a1e
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "KUTE.js",
|
||||
"version": "1.5.4",
|
||||
"version": "1.5.5",
|
||||
"homepage": "http://thednp.github.io/kute.js",
|
||||
"authors": [
|
||||
"thednp"
|
||||
|
|
|
@ -81,7 +81,8 @@ img {
|
|||
border: 0;
|
||||
}
|
||||
svg:not(:root) {
|
||||
overflow: hidden;
|
||||
/*overflow: hidden;*/
|
||||
overflow: visible;
|
||||
}
|
||||
figure {
|
||||
margin: 1em 40px;
|
||||
|
|
|
@ -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><circle></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%'}});
|
||||
|
||||
|
|
|
@ -526,4 +526,6 @@
|
|||
return c;
|
||||
}
|
||||
|
||||
return S;
|
||||
|
||||
}));
|
2
dist/kute-svg.min.js
vendored
2
dist/kute-svg.min.js
vendored
File diff suppressed because one or more lines are too long
|
@ -526,4 +526,6 @@
|
|||
return c;
|
||||
}
|
||||
|
||||
return S;
|
||||
|
||||
}));
|
|
@ -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": {
|
||||
|
|
Loading…
Reference in a new issue