From 75b63526d978ad46d682efbce07709c56fa5e720 Mon Sep 17 00:00:00 2001 From: dotnetCarpenter Date: Sun, 25 Dec 2016 03:14:20 +0100 Subject: [PATCH] update documentation to reflect our new basic path animation support - closing #561 --- CHANGELOG.md | 1 + 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) diff --git a/README.md b/README.md index 9d1dd6a..1756ead 100644 --- 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. -- 2.39.5