在 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 设置动画 - 就可以了。但我只需要为一个加载的 SVG 设置动画，id 为 #Layer_1。

Plunker example

Answer 1

您必须定位 html 文件中的 id，而不是 svg 文件中的那个。

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