如何为参考 SVG 背景制作动画
How to animate an referential SVG background
是否存在使用 vivus.js 制作参考背景 svg 动画的方法?我正在尝试使用它。我在官方文档中找到了这段代码,但我不知道这是否可行。看下面的代码:
HTML
<section id="svg-bg" class="materiais-topo">
<!-- some elements here -->
</section>
CSS (SASS)
.materiais-topo {
background-color: $green-fluo;
background-image: url('../images/line-fluo.svg');
background-position: center center;
background-repeat: no-repeat;
}
JS
new Vivus-bg('svg-bg', {
file: MAIN_URL+'dist/images/line-fluo.svg'
});
有人有什么解决办法吗?如果你知道在没有 vivus.js 的情况下制作参考背景 svg 的动画,请告诉我。
编辑:此方法仅在我的 div 元素中注入 SVG 文件。
因此,据我所知,无法使用 Javascript 操作背景 SVG。
但是,您可以:
- 在您的 SVG 中使用 SMIL 动画(will not work with MSIE/Edge), example here。
- 使用 Javascript 为每一帧生成一个 data:uri,并将它们用作背景图像。
这里是一个 SVG SMIL 动画的例子:
<svg xmlns="http://www.w3.org/2000/svg" width="300px" height="100px">
<rect x="0" y="0" width="300" height="100" stroke="black" stroke-width="1" />
<circle cx="0" cy="50" r="15" fill="blue" stroke="black" stroke-width="1">
<animateMotion path="M 0 0 H 300 Z" dur="3s" repeatCount="indefinite" />
</circle>
</svg>
是否存在使用 vivus.js 制作参考背景 svg 动画的方法?我正在尝试使用它。我在官方文档中找到了这段代码,但我不知道这是否可行。看下面的代码:
HTML
<section id="svg-bg" class="materiais-topo">
<!-- some elements here -->
</section>
CSS (SASS)
.materiais-topo {
background-color: $green-fluo;
background-image: url('../images/line-fluo.svg');
background-position: center center;
background-repeat: no-repeat;
}
JS
new Vivus-bg('svg-bg', {
file: MAIN_URL+'dist/images/line-fluo.svg'
});
有人有什么解决办法吗?如果你知道在没有 vivus.js 的情况下制作参考背景 svg 的动画,请告诉我。
编辑:此方法仅在我的 div 元素中注入 SVG 文件。
因此,据我所知,无法使用 Javascript 操作背景 SVG。
但是,您可以:
- 在您的 SVG 中使用 SMIL 动画(will not work with MSIE/Edge), example here。
- 使用 Javascript 为每一帧生成一个 data:uri,并将它们用作背景图像。
这里是一个 SVG SMIL 动画的例子:
<svg xmlns="http://www.w3.org/2000/svg" width="300px" height="100px">
<rect x="0" y="0" width="300" height="100" stroke="black" stroke-width="1" />
<circle cx="0" cy="50" r="15" fill="blue" stroke="black" stroke-width="1">
<animateMotion path="M 0 0 H 300 Z" dur="3s" repeatCount="indefinite" />
</circle>
</svg>