]> source.dussan.org Git - svg.js.git/commitdiff
Updated readme
authorwout <wout@impinc.co.uk>
Mon, 17 Dec 2012 19:23:15 +0000 (20:23 +0100)
committerwout <wout@impinc.co.uk>
Mon, 17 Dec 2012 19:23:15 +0000 (20:23 +0100)
README.md

index 30b8289844603724bc951f4d69507741fde87c3a..d06097f825b1b5f78b1b945f77f51b8c9bf9e687 100644 (file)
--- 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