围绕中心的 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 应该是：

<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>

围绕中心的 SVG 旋转是移动对象

SVG rotation around center is moving object

svg

rotation