]> source.dussan.org Git - svg.js.git/commitdiff
update documentation to reflect our new basic path animation support - closing #561
authordotnetCarpenter <jon.ronnenberg@gmail.com>
Sun, 25 Dec 2016 02:14:20 +0000 (03:14 +0100)
committerdotnetCarpenter <jon.ronnenberg@gmail.com>
Sun, 25 Dec 2016 02:26:11 +0000 (03:26 +0100)
CHANGELOG.md
README.md

index 0277856742acfcf398c676e34ef73452c019104b..36dbeed198abb0adff90a7a3823fd4c5ab5b9e41 100644 (file)
@@ -16,6 +16,7 @@
 - updated dev dependencies; request and gulp-chmod - `npm run build` now requires nodejs 4.x
 - added code coverage https://coveralls.io/github/svgdotjs/svg.js (3e614d4)
 - added `npm run test:quick` which aim at being fast rather than correct - great for git hooks (981ce24)
+- added support for basic path animations (#561)
 
 # 2.3.6 (21/10/2016)
 - fixed leading and trailing space in SVG.PointArray would return NaN for some points (695f26a) (#529)
index 9d1dd6a2bc512b1af6424410aafa081e94783a11..1756ead32093c34f369cfcd9153787fffc1dc8c5 100644 (file)
--- a/README.md
+++ b/README.md
@@ -24,7 +24,7 @@ var draw = SVG('drawing').size(300, 300)
 var rect = draw.rect(100, 100).attr({ fill: '#f06' })
 ```
 The first argument can either be an id of the element or the selected element itself.
-Be aware that the HTML element must exist before running the svg.js code.
+Be aware that the HTML element must exist before running the SVG.js code.
 
 Given this HTML:
 
@@ -418,9 +418,19 @@ http://www.w3.org/TR/SVG/paths.html#PathData
 Paths can be updated using the `plot()` method:
 
 ```javascript
-path.plot('M100,200L300,400')
+path.plot('M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80')
 ```
 
+The `plot()` method can also be animated:
+
+```javascript
+path.animate(2000).plot('M10 80 C 40 150, 65 150, 95 80 S 150 10, 180 80').loop(true, true)
+```
+
+There is only basic support for animating paths baked into SVG.js, which means that only paths with the same commands (`M`,`C`,`S` etc.) are animatable.
+
+If you need to animate paths that does not share the same commands in order, you can use https://github.com/Fuzzyma/svg.pathmorphing.js
+
 __`returns`: `itself`__
 
 ### array()
@@ -3147,7 +3157,7 @@ rect.on('myevent', function(e) {
 })
 ```
 
-svg.js supports namespaced events following the syntax `event.namespace`.
+SVG.js supports namespaced events following the syntax `event.namespace`.
 
 A namespaced event behaves like a normal event with the difference that you can remove it without touching handlers from other namespaces.