Skip to content

Instantly share code, notes, and snippets.

@rodrimaia

rodrimaia/svg example using vue.js

Created September 5, 2016 02:16
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save rodrimaia/f56ee9208a6e0b8f2937e83355891c43 to your computer and use it in GitHub Desktop.
Save rodrimaia/f56ee9208a6e0b8f2937e83355891c43 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
svg example using vue.js
<html>
<head>
</head>
<body>
<div id="app">
<div>
<label> first vector </label><input type="number" v-model="vector1" >
<label> second vector </label><input type="number" v-model="vector2" >
</div>
<svg width="600px" height="600px">
<defs>
<marker id="arrow" markerWidth="10" markerHeight="10" refx="0" refy="3" orient="auto" markerUnits="strokeWidth">
<path d="M0,0 L0,6 L9,3 z" fill="#f00" />
</marker>
</defs>
<line x1="250" y1="250" x2="350" y2="250" stroke="#000" transform="rotate({{ vector1 }} 300 250)" stroke-width="5" marker-end="url(#arrow)" />
<line x1="250" y1="250" x2="350" y2="250" stroke="#000" transform="rotate({{ vector2 }} 300 250)" stroke-width="5" marker-end="url(#arrow)" />
</svg>
</div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js"> </script>
<script>
new Vue({
el: '#app',
data: {
vector1: 45,
vector2: 90,
}
})
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment