Add a link

[termoplus]

Hi,

Could you please help me to add a link to an animated SVG file? Is it possible to add url parameter in this code?

new Vivus('my-svg-id', {
type: 'delayed',
duration: 200,
animTimingFunction: Vivus.EASE
},);

Thanks

[maxwellito]

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

[termoplus]

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

[maxwellito]

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>

[termoplus]

I will try both options and get back. I tried the second option but it didn't work for me.
thanks

[termoplus]

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

[maxwellito]

You made a mistake on the option 1. You set the listener on myAnimation object instead of svg1 which is your Vivus instance.

[maxwellito]

Any luck?

[termoplus]

Sorry, I was out of town.
I tried. no luck :(
here is a link http://020018.businesscatalyst.com/index.html

[maxwellito]

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

[termoplus]

it is not working any more :)
http://020018.businesscatalyst.com/index.html

[maxwellito]

It's a syntax error. You forgot a comma after the filename.
On 28 Aug 2015 3:11 am, "termoplus" notifications@github.com 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).

[termoplus]

great!!!
is it possible to change cursor to hand if SVG has a link?

thanks

[termoplus]

it this method not really cool because we loose a bit of accessibility but it works or that's why now?

[maxwellito]

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.

[maxwellito]

Any updates?

[termoplus]

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.