diff options
Diffstat (limited to 'playgrounds')
| -rw-r--r-- | playgrounds/transforms/transforms.html | 6 | ||||
| -rw-r--r-- | playgrounds/transforms/transforms.js | 17 |
2 files changed, 19 insertions, 4 deletions
diff --git a/playgrounds/transforms/transforms.html b/playgrounds/transforms/transforms.html index 58eb5dc..d206d06 100644 --- a/playgrounds/transforms/transforms.html +++ b/playgrounds/transforms/transforms.html @@ -12,11 +12,11 @@ <h1>SVG JS Playground</h1> - <svg viewBox="0 0 1400 1000"> + <svg viewBox="0 0 2000 2000"> - <rect id="old" x=200 y=400 width=200 height=400 class="green"/> + <!-- <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 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 /> diff --git a/playgrounds/transforms/transforms.js b/playgrounds/transforms/transforms.js index 3b12f65..f9de24b 100644 --- a/playgrounds/transforms/transforms.js +++ b/playgrounds/transforms/transforms.js @@ -1,5 +1,5 @@ -let mover = SVG.select("#new")[0] +// let mover = SVG.select("#new")[0] // mover.transform({ // // position: [800, 500], // // origin: [200, 400], @@ -18,3 +18,18 @@ let mover = SVG.select("#new")[0] // // // var es = SVG.select('ellipse') + +draw = SVG("svg") + + +offset = draw.screenCTM() +draw.viewbox(100,100, 200, 200) +nested = draw.nested().size(200, 200).move(100,100).viewbox(0, 0, 100, 100) +rect = nested.rect(50, 180).stroke({width:0}).move(25, 90).scale(2, 0, 0).transform({tx:10, ty:10}, true) + +var box = rect.rbox() +draw.rect(box.width, box.height).move(box.x, box.y).fill("blue") +draw.rect(78, 226).move(100, 360).fill("blue") + +// rect1.toParent(nested).transform() +// rect2.toParent(g2).transform() |