Как анимировать ссылочный фон SVG

Question

Существует ли какой-либо способ анимировать ссылочный фоновый svg с помощью vivus.js? Я пытаюсь использовать это. Я нашел этот код в официальной документации, но я не знаю, возможно ли это. Посмотрите на код ниже:

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'
});

У кого-нибудь есть решение? Если вы знаете, как анимировать ссылочный фон svg без vivus.js, дайте мне знать.

РЕДАКТИРОВАТЬ: Этот метод только внедрить файл SVG в мой элемент div.

Answer 1

Итак, насколько я знаю, невозможно манипулировать фоновым SVG с помощью Javascript.

Но вы можете:

• Используйте анимацию SMIL в вашем SVG ( не будет работать с MSIE / Edge ), пример здесь .
• Создайте данные: uri для каждого кадра с Javascript и используйте их в качестве фонового изображения.

Вот пример анимации 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>