Question

如何在其自身中心的较大矩形内旋转（旋转）较小的svg路径。

此代码在整个空间中旋转。

<animateTransform attributeType="xml"
                    attributeName="transform"
                    type="rotate"
                    from="0 10 5"
                    to="360 10 5"
                    dur="1s"
                    repeatCount="indefinite"/>

JS Fiddle

Answer 1

您可以在路径css中添加transform-origin，以使动画居中。

path {
  transform-origin: 50% 50%;
}

通过将animateTransform更改为：

来使其旋转

<animateTransform attributeType="xml"
                attributeName="transform"
                type="rotate"
                from="0 0 0"
                to="360 0 0"
                dur="1s"
                repeatCount="indefinite"/>

将小齿轮的路径移动到大齿轮的中心。

Answer 2

旋转变换中的第二个和第三个值是旋转中心的X和Y坐标。

你的问题是你正在使用（10,5），它远离你的装备中心。正确的值是（97.5,177.5）。

以下更新的代码段：

＆＃13;

*{
  background-color: lime;
}

＆＃13;

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 161 231"><defs><style>.cls-1{fill:#fff;}</style></defs><rect class="cls-1" x="3.5" y="3.5" width="154" height="224" rx="8.5" ry="8.5"/>
<path d="M149,7a5,5,0,0,1,5,5V219a5,5,0,0,1-5,5H12a5,5,0,0,1-5-5V12a5,5,0,0,1,5-5H149m0-7H12A12,12,0,0,0,0,12V219a12,12,0,0,0,12,12H149a12,12,0,0,0,12-12V12A12,12,0,0,0,149,0Z"/>
<path d="M134.46,179.67h-2.81a1.08,1.08,0,0,1-.76-1.84l2-2a1.55,1.55,0,0,0,0-2.18l-2.53-2.53a1.58,1.58,0,0,0-2.18,0l-2,2a1,1,0,0,1-.75.32,1.12,1.12,0,0,1-.76-.3,1,1,0,0,1-.33-.78v-2.81a1.55,1.55,0,0,0-1.54-1.54h-3.58a1.55,1.55,0,0,0-1.54,1.54v2.81a1.07,1.07,0,0,1-1.09,1.08,1,1,0,0,1-.75-.32l-2-2a1.58,1.58,0,0,0-2.18,0l-2.53,2.53a1.55,1.55,0,0,0,0,2.18l2,2a1.08,1.08,0,0,1-.76,1.84h-2.81a1.55,1.55,0,0,0-1.54,1.54v3.58a1.55,1.55,0,0,0,1.54,1.55h2.81a1.08,1.08,0,0,1,.76,1.84l-2,2a1.55,1.55,0,0,0,0,2.18l2.53,2.53a1.58,1.58,0,0,0,2.19,0l2-2a1,1,0,0,1,.75-.32,1.07,1.07,0,0,1,1.09,1.08v2.81a1.55,1.55,0,0,0,1.54,1.55h3.58a1.55,1.55,0,0,0,1.54-1.54v-2.81a1.07,1.07,0,0,1,1.09-1.08,1,1,0,0,1,.75.32l2,2a1.58,1.58,0,0,0,2.18,0l2.53-2.53a1.55,1.55,0,0,0,0-2.18l-2-2a1.08,1.08,0,0,1,.76-1.84h2.81a1.55,1.55,0,0,0,1.54-1.54v-3.58A1.55,1.55,0,0,0,134.46,179.67ZM124.89,183a3.89,3.89,0,1,1-3.89-3.89A3.89,3.89,0,0,1,124.89,183Z"/>
<path d="M106.92,175.17h-2a.75.75,0,0,1-.53-1.29l1.39-1.39a1.08,1.08,0,0,0,0-1.53L104,169.19a1.11,1.11,0,0,0-1.53,0l-1.39,1.39a.73.73,0,0,1-.53.22.78.78,0,0,1-.53-.21.73.73,0,0,1-.23-.55v-2A1.08,1.08,0,0,0,98.75,167h-2.5a1.08,1.08,0,0,0-1.08,1.08v2a.75.75,0,0,1-.76.76.73.73,0,0,1-.53-.22l-1.39-1.39a1.11,1.11,0,0,0-1.53,0L89.19,171a1.08,1.08,0,0,0,0,1.53l1.39,1.39a.75.75,0,0,1-.53,1.29h-2A1.08,1.08,0,0,0,87,176.25v2.5a1.08,1.08,0,0,0,1.08,1.08h2a.75.75,0,0,1,.53,1.29l-1.39,1.39a1.08,1.08,0,0,0,0,1.53L91,185.81a1.11,1.11,0,0,0,1.53,0l1.39-1.39a.73.73,0,0,1,.53-.22.75.75,0,0,1,.76.76v2A1.08,1.08,0,0,0,96.25,188h2.5a1.08,1.08,0,0,0,1.08-1.08v-2a.75.75,0,0,1,.76-.76.73.73,0,0,1,.53.22l1.39,1.39a1.11,1.11,0,0,0,1.53,0l1.77-1.77a1.08,1.08,0,0,0,0-1.53l-1.39-1.39a.75.75,0,0,1,.53-1.29h2a1.08,1.08,0,0,0,1.08-1.08v-2.5A1.08,1.08,0,0,0,106.92,175.17Zm-6.7,2.33a2.72,2.72,0,1,1-2.72-2.72A2.73,2.73,0,0,1,100.22,177.5Z">
<animateTransform attributeType="xml"
                    attributeName="transform"
                    type="rotate"
                    from="0 97.5 177.5"
                    to="360 97.5 177.5"
                    dur="1s"
                    repeatCount="indefinite"/>
</path> 
</svg>

＆＃13;

动画：旋转svg路径在一个较大的矩形框内的自己的中心

2 个答案: