Built with blockbuilder.org
xxxxxxxxxx<head> <meta charset="utf-8"> <script src="https://d3js.org/d3.v4.min.js"></script> <style> body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; } #container{ width:600px; height:600px; } svg{ width:300px; height:300px; margin:150px; border:1px dashed red; overflow:visible; } .spans{ font-family:Helvitica; display:block; } </style></head><div class="slidecontainer"> <p>Angle of Rotation | <span id="degrees">20</span> degrees</p> <input type="range" min="1" max="360" value="20"></div><div> <span class="spans">G Element Transformation: <span id="g_transform"></span></span> <span class="spans">Rect/Text Element Transformation: <span id="rect_transform"></span></span></div><div id="container"> <svg> <text text-anchor="end" dx="-5" dy="-5" fill="black">(0,0) </text> <g id="rotation_g" transform="rotate(20)"> <line x2="150" y2="0" x1="0" y1="0" stroke="black" stroke-dasharray="10"> </line> <circle cx="150" r="5" cy="0"> </circle> <rect fill="yellow" stroke="black" x="0" height="50" width="50" y="0" transform="translate(150,0) rotate(-20)"> </rect> <text alignment-baseline="hanging" fill="black" dx="2" dy="2" x="0" y="0" transform="translate(150,0) rotate(-20)">Top </text> </g> </svg></div><body> <script> d3.select("input").on("change",function(d){ var rotation = d3.select(this).property("value") d3.select("#rotation_g") .attr("transform","rotate(" + rotation + ")") d3.select("#g_transform").text("rotate(" + (rotation) + ")") d3.select("#rect_transform").text("translate(150,0) rotate(" + (-rotation) + ")") d3.select("#degrees") .text(rotation) d3.select("#rotation_g").selectAll("text") .attr("transform","translate(150,0) rotate(" + (-rotation) + ")") d3.select("#rotation_g").selectAll("rect") .attr("transform","translate(150,0) rotate(" + (-rotation) + ")") }) </script></body> https://d3js.org/d3.v4.min.js