diff options
author | wout <wout@impinc.co.uk> | 2012-12-17 19:51:47 +0100 |
---|---|---|
committer | wout <wout@impinc.co.uk> | 2012-12-17 19:51:47 +0100 |
commit | fcab9dc4d28abb27b166b7974bf07de0f9fa9fc2 (patch) | |
tree | 1961429f880d0dde756664c4c345e558c97c910a /README.md | |
parent | 8dfec33b4fa79b89d89a07e3ae92c5d5c5f8ce73 (diff) | |
download | svg.js-fcab9dc4d28abb27b166b7974bf07de0f9fa9fc2.tar.gz svg.js-fcab9dc4d28abb27b166b7974bf07de0f9fa9fc2.zip |
Slimmed down SVG.Shape
Diffstat (limited to 'README.md')
-rw-r--r-- | README.md | 31 |
1 files changed, 30 insertions, 1 deletions
@@ -1,12 +1,41 @@ # svg.js -svg.js is a JavaScript library for manipulating SVG. +svg.js is a small JavaScript library for manipulating SVG. Have a look at [svgjs.com](http://svgjs.com) for a examples. svg.js is licensed under the terms of the MIT License. +## Usage + +### Create a SVG document + +Use the svg() function to create a SVG document within a given html element: + +```javascript +var draw = svg('paper').size(300, 300); +var rect = draw.rect({ width:100, height:100 }).attr({ fill: '#f06' }); +``` +The first argument can either be an id of the element or the selected element itself. +This will generate the following output: + +```html +<div id="paper"> + <svg xmlns="http://www.w3.org/2000/svg" version="1.1" xlink="http://www.w3.org/1999/xlink" width="300" height="300"> + <rect width="100" height="100" fill-color="#f06"></rect> + </svg> +</div> +``` + +### Path elements + +```javascript +var path = draw.path({ data: "M10,20L30,40" }).attr({ fill: '#9dffd3' }); +``` + +For more details on path data strings, check SVG documentation: +http://www.w3.org/TR/SVG/paths.html#PathData ## Compatibility |