围绕中心的SVG旋转是移动物体

Question

我有以下.svg文件：

<?xml version="1.0" encoding="utf-8" ?>
<svg baseProfile="full" height="100cm" version="1.1" width="200cm" xmlns="http://www.w3.org/2000/svg">
    <rect fill="rgb(61, 136, 199)" height="1.0cm" opacity="1.0" transform="rotate(45.0,181.45,181.45)" width="3.0cm" x="0.3144999999999999cm" y="1.3145cm" />
    <circle cx="1.8145cm" cy="1.8145cm" fill="rgb(255, 0, 0)" opacity="1.0" r="0.025cm" />
</svg>

显示如下：

但是，我希望矩形围绕红色圆圈旋转：

Mozilla svg docs州：

The rotate(<a> [<x> <y>]) transform function specifies a rotation by a degrees about a given point. [...] If optional parameters x and y are supplied, the rotate is about the point (x, y).

鉴于圆的坐标为cx="1.8145cm" cy="1.8145cm"且矩形的旋转点为181.45,181.45，为什么矩形不围绕圆旋转？

注意：将旋转点更改为1.8145, 1.8145不会改变任何内容。

Answer 1

因为围绕1.8145, 1.8145（或换句话说1.8145px, 1.8145px）的旋转与围绕1.8145cm, 1.8145cm的旋转不同。 px和cm是不同的单位。

transform属性不允许使用单位坐标，因此您需要将厘米值转换为像素。

每英寸2.54厘米，每英寸96像素。因此，要在它们之间进行转换，您需要将cm值乘以（96 / 2.54）

1.8145 * 96 / 2.54 ~= 68.58

所以SVG应该是：

＆＃13;

＆＃13;

<svg baseProfile="full" height="100cm" version="1.1" width="200cm" xmlns="http://www.w3.org/2000/svg">
    <rect fill="rgb(61, 136, 199)" height="1.0cm" opacity="1.0" transform="rotate(45.0,68.58,68.58)" width="3.0cm" x="0.3144999999999999cm" y="1.3145cm" />
    <circle cx="1.8145cm" cy="1.8145cm" fill="rgb(255, 0, 0)" opacity="1.0" r="0.025cm" />
</svg>

＆＃13;

＆＃13;

＆＃13;