can
Version:
MIT-licensed, client-side, JavaScript framework that makes building rich web applications easy.
44 lines (34 loc) • 1.19 kB
HTML
<html>
<head></head>
<body>
<svg height="100" width="100">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>
<div id='out1'></div>
<script type='text/stache' id='svg-example-1'>
<svg height="120" width="400" xmlns="http://www.w3.org/2000/svg">
<circle xmlns="http://www.w3.org/2000/svg" cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="blue" />
</svg>
</script>
<script type="text/javascript" src="../../node_modules/steal/steal.js" main="@empty"></script>
<script type="text/javascript">
steal("can/view/stache", function(stache){
var template = can.view("svg-example-1");
var frag = template({});
$("#out1").append(frag);
var svg = document.createElement("svg");
var myCircle = document.createElement("circle");
myCircle.setAttribute("id","mycircle");
myCircle.setAttribute("cx",100);
myCircle.setAttribute("cy",100);
myCircle.setAttribute("r",50);
myCircle.setAttribute("fill","green");
myCircle.setAttribute("stroke","black");
myCircle.setAttribute("stroke-width","3");
svg.appendChild(myCircle);
document.body.appendChild(svg);
});
</script>
</body>
</html>