diff options
| author | Saivan <savian@me.com> | 2018-03-02 12:14:42 +1100 |
|---|---|---|
| committer | Saivan <savian@me.com> | 2018-03-02 12:14:42 +1100 |
| commit | 1582edb4236628fbc7875242f159c16283b769c2 (patch) | |
| tree | 1d915c21fce7ce3997edaedd92f4f1a8d8968d9d /playgrounds/transforms | |
| parent | 13cf84b716cd3e06330fa0ea6f077bbe7de0eb88 (diff) | |
| download | svg.js-1582edb4236628fbc7875242f159c16283b769c2.tar.gz svg.js-1582edb4236628fbc7875242f159c16283b769c2.zip | |
Implemented new transformations
This commit implements the new transformation model, but it also
needs to modify a few tests to fit the new format. This is still
a work in progress.
Diffstat (limited to 'playgrounds/transforms')
| -rw-r--r-- | playgrounds/transforms/transforms.html | 18 | ||||
| -rw-r--r-- | playgrounds/transforms/transforms.js | 21 |
2 files changed, 30 insertions, 9 deletions
diff --git a/playgrounds/transforms/transforms.html b/playgrounds/transforms/transforms.html index 4382745..58eb5dc 100644 --- a/playgrounds/transforms/transforms.html +++ b/playgrounds/transforms/transforms.html @@ -12,11 +12,19 @@ <h1>SVG JS Playground</h1> - <svg viewBox="0 0 1000 1000"> - - <rect id="old" x=300 y=400 width=200 height=400 class="green"/> - <rect id="new" x=300 y=400 width=200 height=400 class="pink"/> - + <svg viewBox="0 0 1400 1000"> + + <rect id="old" x=200 y=400 width=200 height=400 class="green"/> + <rect id="new" x=200 y=400 width=200 height=400 class="pink"/> + <ellipse id="new" cx=800 cy=500 rx=10 ry=10 class="dark-pink"/> + <!-- <ellipse cx=0 cy=0 rx=3 ry=3 /> + <ellipse cx=100 cy=0 rx=3 ry=3 /> + <ellipse cx=0 cy=100 rx=3 ry=3 /> + <ellipse cx=100 cy=100 rx=3 ry=3 /> + <ellipse fill=red cx=0 cy=0 rx=3 ry=3 /> + <ellipse fill=red cx=100 cy=0 rx=3 ry=3 /> + <ellipse fill=red cx=0 cy=100 rx=3 ry=3 /> --> + <!-- <ellipse fill=red cx=100 cy=100 rx=3 ry=3 /> --> </svg> </body> diff --git a/playgrounds/transforms/transforms.js b/playgrounds/transforms/transforms.js index 797fa65..3b12f65 100644 --- a/playgrounds/transforms/transforms.js +++ b/playgrounds/transforms/transforms.js @@ -1,7 +1,20 @@ let mover = SVG.select("#new")[0] +// mover.transform({ +// // position: [800, 500], +// // origin: [200, 400], +// // skew: [20, 0], +// // rotate: 30, +// }) -console.log(mover.transform()); -mover.transform({ - position: [30, 50] -}) + +// var draw = SVG.select('svg')[0] +// var rect = draw.rect(100, 100) +// .transform({ +// // rotate: -10, +// translate: [-50, -50], +// // scale: 2 +// }).opacity(0.3) +// +// +// var es = SVG.select('ellipse') |