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

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，但这被忽略了。我用谷歌搜索了自己的脸，并获得了一些信息，但我对此的经验很少，我不确定是否要应用它。 snap 文档和示例无助于减轻我的困惑。

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

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

谢谢大家！

Answer 1

您可以将 css 放在带有 style 标签的 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。您的小圆圈不是方形的，因此不会在中心旋转。