Comments (16)
Hi there,
Yes, you just need to provide the attribute file
with the file link as value. Be careful, there's some restrictions, the file must be on the same domain as the page and cannot be used on a local file (: protocol file:///
). It's not my lazyness, it's due to security reasons from browsers.
Your HTML
<div id="my-container"></div>
Your script
new Vivus('my-container', {
type: 'delayed',
duration: 200,
animTimingFunction: Vivus.EASE,
file: '/link/to/my.svg'
});
from vivus.
Thank you for your help.
You didn't understand me correctly.
I use file: '/link/to/my.svg' to add an SVG image.
I wand to add URL link that people can click on SVG to open a page or a website.
is that possible?
thanks
from vivus.
Oh sorry, my bad.
It's possible but not from the constructor. You must use a listener for that.
var myAnimation = new Vivus('my-container', {
type: 'delayed',
duration: 200,
animTimingFunction: Vivus.EASE,
file: '/link/to/my.svg'
});
myAnimation.el.addEventListener('click', function () {
document.location = '//github.com';
});
It's not really cool because we loose a bit of accessibility but it works.
Otherwise I would recommend you to wrap the SVG container into a <a>
tag.
<a href="//github.com">
<div id="my-container"></div>
</a>
from vivus.
I will try both options and get back. I tried the second option but it didn't work for me.
thanks
from vivus.
it's not working for me.
here is a video for option 1: http://quick.as/PkzBFBbkX
here is a video for option 2: http://quick.as/n8PdCVOR3
here is a live demo for option 2 http://020018.businesscatalyst.com/index.html
I hope you can help
thanks
from vivus.
You made a mistake on the option 1. You set the listener on myAnimation
object instead of svg1
which is your Vivus instance.
from vivus.
Any luck?
from vivus.
Sorry, I was out of town.
I tried. no luck :(
here is a link http://020018.businesscatalyst.com/index.html
from vivus.
Oh.. I realised my mistake. You will need to do it when the SVG is loaded:
var svg1 = new Vivus('svg1', {
type: 'delayed',
delay: 100,
duration: 200,
start: 'inViewport',
animTimingFunction: Vivus.LINEAR,
file: '/assets/enter.svg',
onReady: function (mySvg) {
mySvg.el.addEventListener('click', function () {
document.location = '//github.com';
});
}
});
from vivus.
it is not working any more :)
http://020018.businesscatalyst.com/index.html
from vivus.
It's a syntax error. You forgot a comma after the filename.
On 28 Aug 2015 3:11 am, "termoplus" [email protected] wrote:
it is not working any more :)
http://020018.businesscatalyst.com/index.html—
Reply to this email directly or view it on GitHub
#63 (comment).
from vivus.
great!!!
is it possible to change cursor to hand if SVG has a link?
thanks
from vivus.
it this method not really cool because we loose a bit of accessibility but it works or that's why now?
from vivus.
In the onReady
callback, just add this line:
mySvg.el.style.cursor = 'pointer';
then your code should look like this:
var svg1 = new Vivus('svg1', {
type: 'delayed',
delay: 100,
duration: 200,
start: 'inViewport',
animTimingFunction: Vivus.LINEAR,
file: '/assets/enter.svg',
onReady: function (mySvg) {
mySvg.el.style.cursor = 'pointer';
mySvg.el.addEventListener('click', function () {
document.location = '//github.com';
});
}
});
When I mention loosing accessibility, I'm talking about respecting HTML standards instead of mimic the natural behavior in JavaScript. For example, a user cannot make a right click on your SVG, then choose Open link in a new page
. But you don't really have the choice. Don't worry about it.
from vivus.
Any updates?
from vivus.
Great!
I meant is it possible to be a hand cursor only if there is a link in the SVG.
Now it's all the time :(
Thank you for your help. I appreciate it.
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
- Beginner, unable to use HOT 8
- 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.