diff options
author | wout <wout@impinc.co.uk> | 2013-03-24 19:36:38 +0100 |
---|---|---|
committer | wout <wout@impinc.co.uk> | 2013-03-24 19:36:38 +0100 |
commit | 073c5252f4386b66d909ee5497a9f0460bdbaf37 (patch) | |
tree | 0c0609d25fe991bf854fa528b12f85b16ab0bcdd /README.md | |
parent | 67d367e0d74b3287956130da0077e42c6483dd2f (diff) | |
download | svg.js-073c5252f4386b66d909ee5497a9f0460bdbaf37.tar.gz svg.js-073c5252f4386b66d909ee5497a9f0460bdbaf37.zip |
Updated README on clipping
Diffstat (limited to 'README.md')
-rw-r--r-- | README.md | 14 |
1 files changed, 11 insertions, 3 deletions
@@ -697,11 +697,20 @@ For your convenience, the masking element is also referenced in the masked eleme rect.mask.remove() ``` -If you want to clip elements rather than masking them, have a look at the [svg.clippath.js](https://github.com/wout/svg.clippath.js) plugin. - _This functionality requires the mask.js module which is included in the default distribution._ +## Clipping elements +Clipping elements is exactly the same as masking elements: + +```javascript +var ellipse = draw.ellipse(80, 40).move(10, 10).fill({ color: '#fff' }) + +rect.clipWith(ellipse) +``` + +_This functionality requires the clip.js module which is included in the default distribution._ + ## Arranging elements You can arrange elements within their parent SVG document using the following methods. @@ -993,7 +1002,6 @@ Here are a few nice plugins that are available for svg.js: - [svg.easing.js](https://github.com/wout/svg.easing.js) for more easing methods on animations. - [svg.import.js](https://github.com/wout/svg.import.js) import raw SVG data. - [svg.draggable.js](https://github.com/wout/svg.draggable.js) to make elements draggable. -- [svg.clippath.js](https://github.com/wout/svg.clippath.js) clip elements. - [svg.export.js](https://github.com/wout/svg.export.js) export raw svg. |