在Snap.js中动画化SVG中的SVG

Question

我不能动画SVG加载到SVG容器。我有<svg id="roulette"></svg>，并将SVG与Snap.js一起加载到其中(有id #Layer_1)。和CSS动画不适用于加载SVG #Layer_1。

#Layer_1 {
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-animation: whirl 2s linear infinite;
    animation: whirl 2s linear infinite;
}

但是如果我动画整个SVG容器#轮盘-这是工作。但是我只需要用id #Layer_1动画一个加载的SVG。

柱塞实例

Answer 1

您必须针对html文件中的id，而不是svg文件中的id。

CSS

.block {
    position: relative;
}

#roulette {
    width: 300px;
    height: 300px;
    transform-origin: 50% 50%;
    animation: whirl 2s linear infinite;
}

HTML

<div id="block">
  <svg id="roulette"></svg>
</div>

如果您想要更精确地动画您的svg，请将类添加到svg文件中的<g>标记中，并对它们进行播放。