在Snap.js中为SVG内部的SVG设置动画

Question

我无法动画加载到SVG容器中的SVG。 我有<svg id="roulette"></svg>并将带有Snap.js的SVG加载到其中（具有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容器#Roulette制作动画 - 它的工作原理。但是我需要使用id＃Layer_1为一个加载的SVG设置动画。

Plunker example

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>标签中添加类并使用它们。