aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorwout <wout@impinc.co.uk>2012-12-17 20:23:15 +0100
committerwout <wout@impinc.co.uk>2012-12-17 20:23:15 +0100
commit4c2fab9e9e199560b10c08f97ac2762a9e20263b (patch)
tree73a7de60c35226925f0ca8a5d4f23f72d6c4ff3f
parent5d77bc580a389999a6e4433defdad43726409426 (diff)
downloadsvg.js-4c2fab9e9e199560b10c08f97ac2762a9e20263b.tar.gz
svg.js-4c2fab9e9e199560b10c08f97ac2762a9e20263b.zip
Updated readme
-rw-r--r--README.md50
1 files changed, 49 insertions, 1 deletions
diff --git a/README.md b/README.md
index 30b8289..d06097f 100644
--- a/README.md
+++ b/README.md
@@ -34,10 +34,58 @@ This will generate the following output:
var path = draw.path({ data: "M10,20L30,40" }).attr({ fill: '#9dffd3' });
```
-For more details on path data strings, check SVG documentation:
+For more details on path data strings, please read the SVG documentation:
http://www.w3.org/TR/SVG/paths.html#PathData
+### Bounding box
+
+```javascript
+path.bbox();
+```
+This will return a SVGRect element as a js object:
+
+```javascript
+{ height: 20, width: 20, y: 20, x: 10 }
+```
+
+### Clipping elements
+Clipping elements can be done with either 'clip()' or 'clipTo()'.
+
+Using 'clip()' creates a clip path in the parents 'defs' node, and passes it to a block:
+
+```javascript
+rect.clip(function(clipPath) {
+ clipPath.rect({ x:10, y:10, width:80, height:80 });
+});
+```
+
+You can also reuse clip paths for multiple elements using 'clipTo()'.
+```javascript
+var clipPath = doc.defs().clipPath();
+clipRect = clipPath.rect({ x:10, y:10, width:80, height:80 });
+rect.clipTo(clipPath);
+```
+
+### Setting attributes
+You can set an element's attributes directly with 'attr()':
+
+```javascript
+// set a single attribute
+rect.attr('x', 50);
+
+// set multiple attributes at once
+rect.attr({
+ fill: '#f06',
+ 'fill-opacity': 0.5,
+ stroke: '#000',
+ 'stroke-width': 10
+});
+
+// set an attribute with a namespace
+rect.setAttribute('x', 50, 'http://www.w3.org/2000/svg');
+```
+
## Compatibility
### Desktop