diff options
author | wout <wout@impinc.co.uk> | 2014-02-14 23:22:23 +0100 |
---|---|---|
committer | wout <wout@impinc.co.uk> | 2014-02-14 23:22:23 +0100 |
commit | 0170465f9c60c0b16868af663ba8c11bfcd68fe7 (patch) | |
tree | 32c8b0c88f7047d40670774a0893b7343a4fd122 | |
parent | 8f9ccb16300142307b8ed6aed46c2a4984545600 (diff) | |
download | svg.js-0170465f9c60c0b16868af663ba8c11bfcd68fe7.tar.gz svg.js-0170465f9c60c0b16868af663ba8c11bfcd68fe7.zip |
Updated README
-rwxr-xr-x | README.md | 58 |
1 files changed, 58 insertions, 0 deletions
@@ -2534,6 +2534,15 @@ The dynamic representation: ] ``` +Precompiling it as a `SVG.PointArray`: + +```javascript +new SVG.PointArray([ + [0, 0] +, [100, 100] +]) +``` + Note that every instance of `SVG.Polyline` and `SVG.Polygon` carries a reference to the `SVG.PointArray` instance: ```javascript @@ -2559,12 +2568,61 @@ The dynamic representation: ] ``` +Precompiling it as a `SVG.PathArray`: + +```javascript +new SVG.PathArray([ + ['M', 0, 0] +, ['L', 100, 100] +, ['z'] +]) +``` + Note that every instance of `SVG.Path` carries a reference to the `SVG.PathArray` instance: ```javascript path.array //-> returns the SVG.PathArray instance ``` +#### Syntax +The syntax for patharrays is very predictable. They are basically literal representations in the form of two dimentional arrays. + +##### Move To +Original syntax is `M0 0` or `m0 0`. The svg.js syntax `['M',0,0]` or `['m',0,0]`. + +##### Line To +Original syntax is `L100 100` or `l100 100`. The svg.js syntax `['L',100,100]` or `['l',100,100]`. + +##### Horizontal line +Original syntax is `H200` or `h200`. The svg.js syntax `['H',200]` or `['h',200]`. + +##### Vertical line +Original syntax is `V300` or `v300`. The svg.js syntax `['V',300]` or `['v',300]`. + +##### Bezier curve +Original syntax is `C20 20 40 20 50 10` or `c20 20 40 20 50 10`. The svg.js syntax `['C',20,20,40,20,50,10]` or `['c',20,20,40,20,50,10]`. + +Or mirrored with `S`: + +Original syntax is `S40 20 50 10` or `s40 20 50 10`. The svg.js syntax `['S',40,20,50,10]` or `['s',40,20,50,10]`. + +Or quadratic with `Q`: + +Original syntax is `Q20 20 50 10` or `q20 20 50 10`. The svg.js syntax `['Q',20,20,50,10]` or `['q',20,20,50,10]`. + +Or a complete shortcut with `T`: + +Original syntax is `T50 10` or `t50 10`. The svg.js syntax `['T',50,10]` or `['t',50,10]`. + +##### Arc +Original syntax is `A 30 50 0 0 1 162 163` or `a 30 50 0 0 1 162 163`. The svg.js syntax `['A',30,50,0,0,1,162,163]` or `['a',30,50,0,0,1,162,163]`. + +##### Close +Original syntax is `Z` or `z`. The svg.js syntax `['Z']` or `['z']`. + +The best documentation on paths can be found at https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths. + + _Javascript inheritance stack: `SVG.PathArray` < `SVG.Array`_ ### morph() |