Beginner, unable to use

meetdilip commented 3 years ago

Vivus version: 0.4.6

Browser: Firefox 88 - 64-bit on Ubuntu 20.04

Steps to reproduce it:

I was expecting the following HTML + SVG files I placed on the desktop will give me an animated display when opened with a browser. The SVGs work nicely with Vivus Instant. I am trying to animate them locally. Please see the HTML code I am using

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <title>Vivus Test</title>
  </head>
  <body>

    <h1>My Sample text</h1>

    <div id="my-div"></div>

<script>
  new Vivus('my-div', { duration: 200, file: '/circ.svg' }, myCallback);
</script>

   <script src="https://cdnjs.cloudflare.com/ajax/libs/vivus/0.4.6/vivus.js"></script>

  </body>
</html>

It would be nice know what else should be in this file for the SVG animation ( attached as zip ). Thanks

circ.zip

[note] Please have a minimum of politeness. There's unfortunately only me as contributor/maintainor which help on my free time, I'm not the Amazon customer service or your Mom. I don't ask to send me flowers and tell me how amazing Vivus is (that won't make me help you quicker). But please try to do as much as you can before opening an issue: check that no closed issue mention a similar problem, that your script is executed correctly (conflicts, race conditions...).. Thanks :) [/note]

maxwellito commented 3 years ago

Hi there,

From the HTML you're sharing, I can notice one thing. You instantiate/use Vivus before loading the library. You must switch the two

meetdilip commented 3 years ago

Thanks. I changed the script order and tried again. Got this in console

Uncaught ReferenceError: myCallback is not defined
file:///opt/lampp/htdocs/vivus/anim.html:19

HTML is now


<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <link src="/custom.css" type="stylesheet"></link>

    <title>Vivus Test</title>
  </head>
  <body>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vivus/0.4.6/vivus.js"></script>

<script>
  new Vivus('svg8', { duration: 200, file: '/circ.svg' }, myCallback);
</script>

    <h1>My Sample text</h1>

      <div class="sais">

    <div id="svg8"></div>

      </div>

  </body>
</html>

meetdilip commented 3 years ago

I found a workaround. Modified the index.html page in Test so that I can use my choice of SVG and animate it. Thanks.

I had to use VS Code's Live Server extension. Somehow XAMPP in 20.04 is not able to do animation using index.html in Test.

A request. Is it possible to have something like Vivus Instant locally so that I cannot simply animate my SVGs but also export it ? If yes, would be delighted to know how :)

maxwellito commented 3 years ago

By having Vivus Instant locally, what do you mean? Having the code working locally on your machine so you can generate animated SVG offline? If so, clone vivus-instant (or download the zip) and open index.html in it :)

meetdilip commented 3 years ago

Thanks. I wanted to create animated SVGs locally. It is working fine without XAMPP or VSCode Live Server. Have a nice time. :)

maxwellito / vivus

Beginner, unable to use #236