0

是否存在使用 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 文件。

4

1 回答 1

1

所以，据我所知，用 Javascript 操作背景 SVG 是不可能的。

但是你可以：

这里是一个 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>
于 2018-08-31T16:50:18.937 回答