svg旋转

html代码

<svg></svg>

1.先画一个正方形不旋转的效果

const svg = d3.select('svg');
svg.append('rect').attr('x', 150).attr('y', 150).attr('height', 50).attr('width', 50).attr('fill', 'yellow')

2.再画一个围绕左上角顶点旋转20度的正方形（rotate(角度,x坐标 y坐标)）

svg.append('rect').attr('x', 150).attr('y', 150).attr('height', 50).attr('width', 50).attr('fill', 'gray').attr('transform', 'rotate(20,150 150)')

3.再画一个围绕左上角顶点旋转45度的正方形

4.画一个围绕正方形中心点旋转的效果（起始点150,150,边长都是50,所以中心点为175 175）

svg.append('rect').attr('x', 150).attr('y', 150).attr('height', 50).attr('width', 50).attr('fill', 'blue').attr('transform', 'rotate(45,175 175)')