An example of the concept of nested SVG <g> elements, each having their own transform. This shows how the transforms nest such that the parent transform is applied to all children.
Built with blockbuilder.org
An example of the concept of nested SVG <g> elements, each having their own transform. This shows how the transforms nest such that the parent transform is applied to all children.
Built with blockbuilder.org
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
svg { width:100%; height: 100% }
line {
stroke: black;
stroke-width: 30px;
stroke-linecap: round;
}
</style>
</head>
<body>
<script>
var width = 960;
var height = 500;
var scaleFactor = 0.6;
var svg = d3.select('body').append('svg')
.attr({width: width, height: height});
var g = svg.append('g')
.attr('transform', 'translate('+(width/2)+', '+(height/2)+')');
function t(selection){
selection.append('line')
.attr('x1', -100)
.attr('y1', 0)
.attr('x2', 100)
.attr('y2', 0);
}
var g1 = g.append('g').call(t);
var g2 = g1.append('g').call(t);
var g3 = g2.append('g').call(t);
var g4 = g3.append('g').call(t);
var rotation = 0;
function animate(){
g1.attr('transform', 'rotate('+rotation+')');
g2.attr('transform', 'translate(100, 0) rotate('+rotation*2+') scale('+scaleFactor+')');
g3.attr('transform', 'translate(100, 0) rotate('+rotation*4+') scale('+scaleFactor+')');
g4.attr('transform', 'translate(100, 0) rotate('+rotation*8+') scale('+scaleFactor+')');
rotation += 1;
requestAnimationFrame(animate);
}
animate();
</script>
</body>