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 动画，请将 class 添加到 svg 文件内的 <g> 标签并使用它们。

Snap.js 中的 SVG 内的动画 SVG

Animate SVG inside SVG in Snap.js

javascript

css

svg

css-animations

snap.svg

CSS

HTML