在 SVG 中围绕矩形自身中心旋转

我有以下代码:

<svg>


<defs>
<rect id = "myRect"
x = "10"
y = "10"
height = "120"
width = "120"
stroke-width = "2px"
stroke = "red"
fill = "blue" />


</defs>




<g transform = "translate(100,30)">
<use xlink:href = "#myRect" />
</g>


<g transform = "translate(100, 100) rotate(45 ? ?)">


<rect id = "myRect"
x = "10"
y = "10"
height = "120"
width = "120"
stroke-width = "2px"
stroke = "green"
fill = "yellow" />
</g>


</svg>

当我平移矩形没有旋转，它是工作良好。但是当我旋转它的时候，我想绕着它的中心轴点旋转。我应该传递什么给旋转属性？

126685 次浏览
小开
最佳答案

You just need to add half the width/height of the rectangle to get its centre.

<g transform = "translate(100, 100) rotate(45 60 60)">

See transform documentation of the rotate function for more information.

小开

The accepted answer works if you are drawing the rectangle starting at point (0,0) which was the OP case. However for me it was not!

Here is what worked for me:

  • To get the rectangle coordinates i used $('#rectID').getBBox() method, should return [rect-height , rect-width , rect-y , rect x ]
  • The center point is ( rect-x + (rect-width/2) , rect-y + (rect-height/2) )

Here is a snippet i used on the browser console:

var coord = $('#elemID')[0].getBBox();
coord.x + (coord.width/2) +' '+ coord.y + (coord.height/2)
小开

Nothing you just need to write the following code with the element in javascript:

element.rotate(angle Degree);
小开

You would have to set the center as the center of the filled element. Like this:

svg .rotate {
transform-box: fill-box;
transform-origin: center;
transform: rotate(45deg);
}
小开

origin
x = x + width / 2
y = y + height / 2
here
x is 10
y is 10
width is 120
height is 120

<g transform = "translate(100, 100) rotate(45 70 70)">
小开

I know this is an old post but if there are people out there who are looking make the values modifiable outside the group element

    const centerX=100;
const centerY=100;
const firstAngle=45;
const secondAngle=60;
const thirdAngle =60;
  

<g transform ={`translate(${centerX}, ${centerY}) rotate(${firstAngle} ${secondAngle},
${thirdAngle})`}>

提交答案