为什么我无法在SVG中围绕给定点旋转路径

Question

让我们考虑this SVG file from Openclipart（link to raw SVG file）。作为参考，它看起来像这样：

我现在想要旋转指针，以便我可以让时钟显示任意时间。

我已确定时针由此path元素编码：

<path
   d="m 458.13588,295.06406 c 1.74675,-16.11195 25.92429,-46.33386 37.207,-59.62773 l -0.0945,-0.0895 c -12.66188,11.97753 -41.49863,37.74816 -57.33149,40.35684 -30.58445,5.03466 -23.84883,26.09555 -19.57494,34.86553 l -52.97792,55.87976 6.16814,5.91214 53.02794,-55.93477 c 9.10302,3.92158 30.23513,9.51278 33.57547,-21.36261 z"
   id="path526"
   inkscape:connector-curvature="0"
   style="fill:url(#linearGradient4636);display:inline"
   inkscape:transform-center-y="-65.845483"
   sodipodi:nodetypes="cccccccccc"
   inkscape:transform-center-x="-63.497113" />

我还确定双手交叉的中心圆由此ellipse元素编码：

<ellipse
     cx="150.233"
     cy="151.011"
     rx="8.0819998"
     ry="8.125"
     id="ellipse542"
     sodipodi:cx="150.233"
     sodipodi:cy="151.011"
     sodipodi:rx="8.0819998"
     sodipodi:ry="8.125"
     style="fill:url(#radialGradient4393)"
     d="m 158.315,151.011 c 0,4.48732 -3.61843,8.125 -8.082,8.125 -4.46356,0 -8.082,-3.63768 -8.082,-8.125 0,-4.48731 3.61844,-8.125 8.082,-8.125 4.46357,0 8.082,3.63769 8.082,8.125 z" />

由于此ellipse元素具有属性cx="150.233"和cy="151.011"，我认为此椭圆的中心位于点(150.233, 151.011)，并且在合理的准确度下，我可以假设双手交叉在这一点，这是我应该转动手的确切点。

所以对于初学者来说，让我们试着将小时时钟旋转，比方说，10°。 Having read the MDN documentation of the transform attribute我可以通过将属性transform="rotate(10 150.233 151.011)"添加到前面提到的path元素来完成此操作，获取以下代码：

<path
   d="m 458.13588,295.06406 c 1.74675,-16.11195 25.92429,-46.33386 37.207,-59.62773 l -0.0945,-0.0895 c -12.66188,11.97753 -41.49863,37.74816 -57.33149,40.35684 -30.58445,5.03466 -23.84883,26.09555 -19.57494,34.86553 l -52.97792,55.87976 6.16814,5.91214 53.02794,-55.93477 c 9.10302,3.92158 30.23513,9.51278 33.57547,-21.36261 z"
   id="path526"
   inkscape:connector-curvature="0"
   style="fill:url(#linearGradient4636);display:inline"
   inkscape:transform-center-y="-65.845483"
   sodipodi:nodetypes="cccccccccc"
   inkscape:transform-center-x="-63.497113"
   transform="rotate(10 150.233 151.011)" />

不幸的是，结果证明我的假设是错误的：

我没理解什么以及如何旋转这只手？

Answer 1

SVG适用于＆＃34;用户空间＆＃34;用于坐标。如果元素具有transform属性，则其属性中表示的坐标引用本地坐标系 userspace ，该坐标系从其父元素的坐标系转换而来，就像transform属性一样描述。因此，它也与根<svg>元素的坐标系不同。

当元素的父元素具有transform属性时，也会发生同样的情况：用户空间坐标系派生自父节点，并且与根节点不同。 （元素越来越复杂＆＃34;建立一个视口＆＃34;，但我们可以在这里跳过它。）

您未注意到的是，您为中心确定的椭圆具有属性为<g>的父transform="scale(2.4444516,2.4444516)"元素。如果将cx和cy值与这些缩放因子相乘，则得到< / p>

cx = 367.23729
cy = 369.13908

这与整个SVG的大小非常吻合。它具有属性width="734.47461" height="738.27081"，如果将它们减半，则与椭圆的值的差别不大。

检查了手元素或其父元素的坐标系未被转换后，您现在可以将旋转设置为

transform="rotate(10 367.23729 369.13908)"

如果您继续使用SVG，那么阅读规范中的chapter about coordinate systems and transformations肯定是一个好主意。