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
license: mit |
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> |