Comments (8)
maxwellito
commented on July 30, 2024
1
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 <script> tags.
About local development, you must serve your fila via a webserver. Consider
installing "http-server" from NPM or find another way to serve your local
file.
Then it should do the trick :)
from vivus.
maxwellito
commented on July 30, 2024
1
Any error in the web console?
Also, I see you didn't change the order of the script tags. They should be
like in the following order.
<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>
from vivus.
maxwellito
commented on July 30, 2024
1
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 :)
from vivus.
meetdilip
commented on July 30, 2024
1
Thanks. I wanted to create animated SVGs locally. It is working fine without XAMPP or VSCode Live Server. Have a nice time. :)
from vivus.
meetdilip
commented on July 30, 2024
Thanks for the response. I have XAMPP installed. I placed vivus-master in /opt/lampp/htdocs and then chose test/manual/index.html . It looks like the test is not successful because I do not get any animation. Please see
from vivus.
meetdilip
commented on July 30, 2024
I moved the script tags just after the body, but with no luck
SVG looks like
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="210mm"
height="297mm"
viewBox="0 0 210 297"
version="1.1"
id="svg8"
inkscape:version="1.0.2 (1.0.2+r75+1)"
sodipodi:docname="circ.svg">
<defs
id="defs2" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="0.35"
inkscape:cx="400"
inkscape:cy="560"
inkscape:document-units="mm"
inkscape:current-layer="layer1"
inkscape:document-rotation="0"
showgrid="false"
inkscape:window-width="1312"
inkscape:window-height="699"
inkscape:window-x="54"
inkscape:window-y="30"
inkscape:window-maximized="1" />
<metadata
id="metadata5">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1">
<circle
style="fill:none;stroke:#000000;stroke-width:0.529167"
id="path833"
cx="96.706818"
cy="134.39049"
r="34.225163" />
<circle
style="fill:none;stroke:#000000;stroke-width:0.529167"
id="path835"
cx="69.142792"
cy="191.39706"
r="11.093869" />
<circle
style="fill:none;stroke:#000000;stroke-width:0.529167"
id="circle837"
cx="129.48465"
cy="191.39706"
r="11.093869" />
<circle
style="fill:none;stroke:#000000;stroke-width:0.529167"
id="path839"
cx="98.171478"
cy="207.77689"
r="59.820881" />
</g>
</svg>
<script>
new Vivus('svg8', {duration: 200}, myCallback);
</script>
HTML is
<!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>
new Vivus('svg8', { duration: 200, file: '/circ.svg' }, myCallback);
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vivus/0.4.6/vivus.js"></script>
<h1>My Sample text</h1>
<div id="svg8"></div>
</body>
</html>
The documentation said that there should be some definition of size. So I used a custom.css with
.sais {
height: 250px;
width: 250px;
}
But I am not sure where to use it in HTML. Thanks for your time.
from vivus.
meetdilip
commented on July 30, 2024
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>
from vivus.
meetdilip
commented on July 30, 2024
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 :)
from vivus.
Related Issues (20)
- Trigger SVG to draw as soon as you see it (very large SVG) HOT 1
- Include Start delay without Loop HOT 3
- Is vivus deprecated? HOT 1
- daisy-chaining a series of images? HOT 2
- Support for Play Pause HOT 4
- Vivus MAP Array Empty, no animation rendered. HOT 2
- Problem using stroke based mask using multiple time the same SVG file
- Is there any rewind too?
- [Feature Request] Animate individual paths HOT 2
- [Error Fix]: There is a grammatical error on the index page. HOT 2
- Text is drawing immediately HOT 2
- Is there any option to draw svg on scroll? HOT 1
- No "ease-in-out" timing function? HOT 3
- Move a pencil while drawing ? HOT 1
- Integration with vue 3? HOT 4
- Callback function for when a path is completed? HOT 1
- Animation automatically replay
- Not working for a simple test HOT 2
- Please add Shuffle/Random animation type to Vivus
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vivus.