Q&A
d3jsを利用してsvgのpathで作成した四角をその場でX軸回転させたいのですが、下記だと回転の軸が下にずれてしまいます。なぜでしょうか？できれば、ずれる原理を教えてほしいです。
javascript
1<!DOCTYPE html> 2<head> 3<script src="https://d3js.org/d3.v5.min.js"></script> 4<style> 5body{ 6 margin: 0px; 7} 8</style> 9</head> 10<body> 11<svg></svg> 12<script> 13d3.select("svg").append("g") 14 .append("path") 15 .attr("fill", "red") 16 .attr("d", "M0,0L100,0L100,100L0,100Z"); 17 18r(); 19async function r() { 20 for (let i = 360; i >= 0; i--) { 21 d3.select("g") 22 .style("transform-origin", "50% 50%") 23 .style("transform", "rotateX(" + i + "deg)"); 24 25 await new Promise(resolve => setTimeout(resolve, 15)); 26 } 27} 28</script> 29</body> 30</html>
あなたの回答
tips
プレビュー
