diff options
| author | Saivan <savian@me.com> | 2018-02-27 17:23:59 +1100 |
|---|---|---|
| committer | Saivan <savian@me.com> | 2018-02-27 17:23:59 +1100 |
| commit | 1cb509f863b17af90827012e6f6ae81cb694f654 (patch) | |
| tree | 97155f552708385cb85b209ba0e6c2ccc523bbdf /playgrounds | |
| parent | 4b078f8732a494b7f184556f276b011317a766b5 (diff) | |
| download | svg.js-1cb509f863b17af90827012e6f6ae81cb694f654.tar.gz svg.js-1cb509f863b17af90827012e6f6ae81cb694f654.zip | |
Made developing a little more enjoyable
This commit adds playgrounds and a build:dev mode. Now you
can call npm run build:dev to make the linter warn you about
errors without breaking. Also, we now have playgrounds, where
you can use a built version of svg.js to run your own tests.
Diffstat (limited to 'playgrounds')
| -rw-r--r-- | playgrounds/playground.css | 42 | ||||
| -rw-r--r-- | playgrounds/transforms/transforms.html | 27 | ||||
| -rw-r--r-- | playgrounds/transforms/transforms.js | 7 |
3 files changed, 76 insertions, 0 deletions
diff --git a/playgrounds/playground.css b/playgrounds/playground.css new file mode 100644 index 0000000..1808d6a --- /dev/null +++ b/playgrounds/playground.css @@ -0,0 +1,42 @@ + +html { + background-color : #f5f6f7; + text-align: center; +} + +h1 { + color: #f06; + font-size: 6vh; + margin: 4vh; + font-family: Helvetica; +} + +svg { + width: 70vw; + height: 80vh; + background-color: white; + position: fixed; + border-radius: 20px; + border: #f065 1px solid; + left: 15vw; +} + +.pink { + fill: #FF0066; +} + +.green { + fill: #00ff99; +} + +.dark-pink { + fill: #660029; +} + +.light-pink { + fill: #FF99C2; +} + +.off-white { + fill: #FFCCE0; +} diff --git a/playgrounds/transforms/transforms.html b/playgrounds/transforms/transforms.html new file mode 100644 index 0000000..4382745 --- /dev/null +++ b/playgrounds/transforms/transforms.html @@ -0,0 +1,27 @@ + +<!DOCTYPE html> +<html> + + <head> + <meta charset="utf-8"> + <title>SVG Playground</title> + <link rel="stylesheet" href="../playground.css"> + </head> + + <body> + + <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> + + </body> + + <script src="../../dist/svg.js" charset="utf-8"></script> + <script src="transforms.js" charset="utf-8"></script> + +</html> diff --git a/playgrounds/transforms/transforms.js b/playgrounds/transforms/transforms.js new file mode 100644 index 0000000..797fa65 --- /dev/null +++ b/playgrounds/transforms/transforms.js @@ -0,0 +1,7 @@ + +let mover = SVG.select("#new")[0] + +console.log(mover.transform()); +mover.transform({ + position: [30, 50] +}) |