Skip to content

Instantly share code, notes, and snippets.

@hashrock

hashrock/svg-sandbox.html

Created December 4, 2017 12:44
Show Gist options
  • Star 12 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save hashrock/6f082d09f8a9073dae1caa07dbd26b6f to your computer and use it in GitHub Desktop.
Save hashrock/6f082d09f8a9073dae1caa07dbd26b6f to your computer and use it in GitHub Desktop.
Download ZIP
Raw
svg-sandbox.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>SVG Sandbox</title>
<style>
body {
background: #EEE;
}
svg {
background: #FFF;
}
line {
stroke: #333;
stroke-width: 3;
}
path {
stroke: #333;
stroke-width: 3;
fill: none;
}
rect {
fill: #CCC;
stroke: #333;
}
circle {
fill: #CCC;
stroke: #333;
}
</style>
</head>
<body>
<div id="app">
<svg viewbox="0 0 500 400" width="500" height="400">
<rect x=100 y=100 width=20 height=20></rect>
<circle cx=200 cy=100 r=20></circle>
<text x=300 y=100>test</text>
<line x1=100 y1=200 x2=120 y2=220></line>
<path d="M 200,200 C 240,200 210,250 250,250"></path>
</svg>
</div>
<script src="https://unpkg.com/vue@2.5.9/dist/vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
},
mounted() {
},
methods: {
}
})
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment