Search code examples
javascriptjquerycsssvgvivus

How to animate an referential SVG background


Does exists some way to animate referential background svg with vivus.js? I'm trying to use it. I found this code in the oficial documentation but I don't know if this is possible. Look at the code below:

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

Someone has any solution? If you know to animate referential background svg without vivus.js let me know.

EDIT: This method only inject SVG file in my div element.


Solution

  • So, as far as I know, it's impossible to manipulate a Background SVG with Javascript.

    But, you can:

    Here an example of SVG SMIL animation:

    <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>