为什么我不能围绕SVG中的给定点旋转路径 让我们考虑一下。作为参考，它如下所示：

我现在想旋转指针，这样我可以让时钟显示任意时间

我已确定时针由该

路径

元素编码：

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

由于该

椭圆

元素具有属性

cx=“150.233”

和

cy=“151.011”

我认为该椭圆的中心位于点

（150.233，151.011）

，并且以合理的精度，我可以假设双手在此点交叉，这正是我应该旋转双手的点

首先，让我们试着将时钟旋转10°。我认为这可以通过将属性

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)" />

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

---

我不明白的是什么以及如何旋转这只手？

SVG使用“用户空间”作为坐标。如果元素具有transform属性，则其属性中表示的坐标指的是局部坐标系，即用户空间，该坐标系是从其父元素的坐标系转换而来的，正如

transform

属性所描述的那样。因此，它也不同于根元素的坐标系

当元素的父元素具有transform属性时也会发生同样的情况：UserSpace坐标系源自父元素，并且与根元素的坐标系不同。（元素“建立视口”会变得更复杂，但我们可以跳过这里。）

您没有注意到的是，您为中心标识的椭圆有一个父元素，该元素具有一个属性

transform=“scale（2.4444516,2.4444516）”

如果将cx和cy值与这些比例因子相乘，则得到

cx = 367.23729
cy = 369.13908

这非常适合SVG的整体大小。它具有属性

width=“734.47461”height=“738.27081”

，如果将这些属性减半，则它们与椭圆的值差别不大

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

transform="rotate(10 367.23729 369.13908)"

如果您继续与SVG合作，那么阅读规范中的内容肯定是一个好主意