diff options
author | dotnetCarpenter <jon.ronnenberg@gmail.com> | 2016-12-25 03:14:20 +0100 |
---|---|---|
committer | dotnetCarpenter <jon.ronnenberg@gmail.com> | 2016-12-25 03:26:11 +0100 |
commit | 75b63526d978ad46d682efbce07709c56fa5e720 (patch) | |
tree | 651c9d0f3d827b1ea915f1db5ce2ec4d8777a4f3 | |
parent | c8afde0760979d9ef9e9edc4f703c678419a2ee8 (diff) | |
download | svg.js-75b63526d978ad46d682efbce07709c56fa5e720.tar.gz svg.js-75b63526d978ad46d682efbce07709c56fa5e720.zip |
update documentation to reflect our new basic path animation support - closing #561
-rw-r--r-- | CHANGELOG.md | 1 | ||||
-rw-r--r-- | README.md | 16 |
2 files changed, 14 insertions, 3 deletions
diff --git a/CHANGELOG.md b/CHANGELOG.md index 0277856..36dbeed 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -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) @@ -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. |