aboutsummaryrefslogtreecommitdiffstats
path: root/README.md
diff options
context:
space:
mode:
authorwout <wout@impinc.co.uk>2012-12-31 12:21:45 +0100
committerwout <wout@impinc.co.uk>2012-12-31 12:21:45 +0100
commit9f622f7b160fb977a4354eb0f775d4b53a2f7443 (patch)
tree120ab0acc0e073b89a9f68594c36d8a1501bdc20 /README.md
parent7d3e4c43a64cdb9ce19b71d8dc1783c0bc031d91 (diff)
downloadsvg.js-9f622f7b160fb977a4354eb0f775d4b53a2f7443.tar.gz
svg.js-9f622f7b160fb977a4354eb0f775d4b53a2f7443.zip
Added mask.js
Diffstat (limited to 'README.md')
-rw-r--r--README.md35
1 files changed, 31 insertions, 4 deletions
diff --git a/README.md b/README.md
index a1dac4e..857bf8d 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,6 @@
# svg.js
-A lightweight (3k gzipped) library for manipulating SVG.
+A lightweight (3.5k gzipped) library for manipulating SVG.
Svg.js is licensed under the terms of the MIT License.
@@ -304,14 +304,41 @@ rect.clip(function(clipPath) {
You can also reuse clip paths for multiple elements using `clipTo()`.
```javascript
-var clipPath = doc.defs().clip();
-clipRect = clipPath.ellipse(80, 40).move(10, 10);
+var clipPath = draw.defs().clip();
+var ellipse = clipPath.ellipse(80, 40).move(10, 10);
rect.clipTo(clipPath);
```
_This functionality requires the clip.js module which is included in the default distribution._
+## Masking elements
+Masking elements works very much the same as clipping with either `mask()` or `maskTo()`.
+
+Using `mask()` creates a mask in the parents 'defs' node, and passes it to a block:
+
+```javascript
+var gradient = draw.gradient('linear', function(stop) {
+ stop.at({ offset: 0, color: '#000' });
+ stop.at({ offset: 90, color: '#fff' });
+});
+
+rect.mask(function(mask) {
+ mask.ellipse(80, 40).move(10, 10).fill({ color: gradient.fill() });
+});
+```
+
+You can also reuse masks for multiple elements using `maskTo()`.
+
+```javascript
+var mask = draw.defs().mask();
+var ellipse = mask.ellipse(80, 40).move(10, 10).fill({ color: gradient.fill() });
+rect.maskTo(mask);
+```
+
+_This functionality requires the mask.js module which is included in the default distribution._
+
+
## Arranging elements
You can arrange elements within their parent SVG document using the following methods:
@@ -423,7 +450,7 @@ rect.click(function() {
});
```
-Available events are `click`, `dblclick`, `mousedown`, `mouseup`, `mouseover`, `mouseout` and `mousemove`.
+Available events are `click`, `dblclick`, `mousedown`, `mouseup`, `mouseover`, `mouseout`, `mousemove`, `touchstart`, `touchend`, `touchmove` and `touchcancel`.