aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authordotnetCarpenter <jon.ronnenberg@gmail.com>2016-12-25 03:14:20 +0100
committerdotnetCarpenter <jon.ronnenberg@gmail.com>2016-12-25 03:26:11 +0100
commit75b63526d978ad46d682efbce07709c56fa5e720 (patch)
tree651c9d0f3d827b1ea915f1db5ce2ec4d8777a4f3
parentc8afde0760979d9ef9e9edc4f703c678419a2ee8 (diff)
downloadsvg.js-75b63526d978ad46d682efbce07709c56fa5e720.tar.gz
svg.js-75b63526d978ad46d682efbce07709c56fa5e720.zip
update documentation to reflect our new basic path animation support - closing #561
-rw-r--r--CHANGELOG.md1
-rw-r--r--README.md16
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.