Question

我正试图让一个保龄球在另一个图像内循环旋转，但重心位于另一个图像的中心之外，我无法弄明白该怎么做。

svg文件是：

<svg version="1.1" id="icono-zaragoza" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="350px" height="270.439px" viewBox="0 0 350 270.439" enable-background="new 0 0 350 270.439" xml:space="preserve">
    <image overflow="visible" width="350" height="268" xlink:href="http://i.imgur.com/NI4toqy.png"  transform="matrix(1 0 0 1 -14.313 -2.3545)">
    </image>
    <image id="zaragozaBolod" class="rotating" overflow="visible" width="136" height="136" xlink:href="http://i.imgur.com/m5hqaZ1.png"  transform="matrix(1 0 0 1 112.9995 67.625)">
    </image>
</svg>

我正在使用的CSS：

@-webkit-keyframes rotating {
  from{
       -webkit-transform: rotate(0deg);
  }
  to{
       -webkit-transform: rotate(360deg);
  }
}

.rotating {
    -webkit-animation: rotating 2s linear infinite;
}

这是正在发生的事情的一个例子：http://jsfiddle.net/FswgL/

在另一个对象内的循环中旋转svg文件内的图像

0 个答案: