can
Version:
MIT-licensed, client-side, JavaScript framework that makes building rich web applications easy.
64 lines (55 loc) • 1.68 kB
HTML
<html>
<head></head>
<body>
<div id='out1'></div>
<script type='text/stache' id='svg-example-1'>
<svg height="120" width="400">
{{#showCircle}}
<circle cx="50" cy="50" r="{{radius}}" stroke="black" stroke-width="3" fill="blue" />
{{/showCircle}}
{{#showRect}}
<rect x="60" y="10" width="100" height="100" rx="15" ry="15"/>
{{/showRect}}
</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 radius = can.compute(40);
var showRect = can.compute(true);
var frag = template({
showCircle: true,
showRect: showRect,
radius:radius
});
var dir = -1;
window.requestAnimationFrame(function(){
var rad = radius();
rad+=dir;
radius(rad);
if(rad === 1 || rad === 40) {
dir = dir * -1;
console.log("toggle!")
showRect(!showRect());
}
window.requestAnimationFrame(arguments.callee);
});
$("#out1").append(frag);
/*var svgNS = "http://www.w3.org/2000/svg";
var svg = document.createElementNS(svgNS, "svg");
var myCircle = document.createElementNS(svgNS,"circle");
myCircle.setAttributeNS(null,"id","mycircle");
myCircle.setAttributeNS(null,"cx",100);
myCircle.setAttributeNS(null,"cy",100);
myCircle.setAttributeNS(null,"r",50);
myCircle.setAttributeNS(null,"fill","green");
myCircle.setAttributeNS(null,"stroke","black");
myCircle.setAttributeNS(null,"stroke-width","3");
svg.appendChild(myCircle);
document.body.appendChild(svg);*/
});
</script>
</body>
</html>