Question

我在svg文件（http://traaidmark.com/etc/svg-title-circle.svg）中有三个圆圈组，我需要单独旋转。我给每个圈子组一个唯一的ID。

我想使用snap svg，我已经设法将SVG加载到我的容器中（#svg-title）。

以下是我用来加载图片的JS：

$(document).ready(function(){

    var s = Snap("#svg-title");
    Snap.load("http://traaidmark.com/etc/svg-title-circle.svg", onSVGLoaded ) ;

    function onSVGLoaded( data ){ 
        s.append( data );
    }

});

我面临的麻烦在于圈子的动画。我尝试使用css，但这只是被忽略了。我在脸上搜索了自己的蓝色，并获得了一些信息，但我对这方面的经验很少，而且我不确定应用它。快照文档和示例无助于减轻我的困惑。

我怀疑，如果我得到一个对我有意义的起点，我就能搞清楚了！

如果有人可以提供帮助，即使只是一个圈子，我也将永远感激不尽。我已经尽可能地了解了所有类和ID名称。

谢谢你们！

Answer 1

您可以将css放在带有样式标记的svg中。我把这个动画放在你的svg：

中

#svg-big-circle {
    -webkit-animation:spin 4s linear infinite;
    -moz-animation:spin 4s linear infinite;
    animation:spin 4s linear infinite;
    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
}

@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@keyframes spin { 100% { transform: rotate(360deg); } }

似乎有效：jsFiddle。你的小圆圈不是平方的，所以它不会在中心旋转。

通过snap.svg旋转已加载的svg的ID

1 个答案: