Not working in Opera

[jordif]

Hi,

very nice plugin, thanks for sharing!

Not sure why, but Opera is throwing this error (also when visiting the demo site):
Uncaught exception: Error: Vivus [constructor]: "element" parameter must be a string or a SVGelement

Any ideas?

Thanks

[maxwellito]

Hi,
Thanks for these kind words.
This error happen when the element attribute passed into the constructor is incorrect. Can you show me your code please? Just paste it here

[jordif]

Hi,

thanks for the quick reply.

Actually the error happens on your demo page as well (only when using Opera browser).

Have you tested the demo in Opera?

thanks again!

Jordi

[maxwellito]

Owww.. Ouch!
Which platform? Mac OS?
I have to fix that point. Thanks for spotting it

[jordif]

Linux.

Hope you find a fix :)

[maxwellito]

I've made some tests today. On Max OS, no issues. But Ubuntu, exactly this. I don't know why the engine behave differently on the Linux version.

To make it simple, when an Vivus instance is created, the code check the node element is a SVGSVGElement object. But on Opera linux, the same node element is a SVGElement object.

No idea why, but I'll update the checking process to fix this. Thanks for spotting it :-)

[jordif]

Awesome! Glad you could sort it out!

[jolic]

My tests shows some problems too with Safari on Mac. I haven't tested this in other browsers but here's my solution:

I load a svg via from an exernal file like:
Your browser does not support SVG

Vivus can't work in this as the element is (onLoad) an SVGSVGElementConstructor.

So change vivu.js on line 43 + 332 from:

if (element.constructor === SVGSVGElement) {

to

if ( _checkElm(element) ) {

and on the top of your js file directly after

'use strict';
(function () {

put this function:

var _checkElm = function(elm){
if (elm.constructor === SVGSVGElement) {
return true;
}
if ( typeof elm === 'object' && typeof elm.nodeName !== 'undefined' && elm.nodeName.toLowerCase() === 'svg') {
return true;
}
return false;
};

So with this little patch you could directly address an svg by dom.

HTH somebody

[jolic]

<object type="image/svg+xml" data="./lens.svg" >Your browser does not support SVG</object>

^^this is the source (didn't show up in the comment above)

[maxwellito]

@jolic This issue is not related to the original one from @jordif. Your error is due to the usage of object tag instead of svg. In the README.md I mention that the library only works with inline SVG tags.

On the other side I'm curious about what you try to achieve. Did you really managed to make Vivus working with an object tag? Because it's not possible, this tag will sandbox the content of the SVG (like ShadowDOM or iframe). So JavaScript cannot access the content and modify it. I'm probably missing something.

[jolic]

@maxwellito
Yes, with my patch vivus works with an <object>tag!

The benefit is that you can keep the svg file as an external reference and the svg can have javascript code inside the svg file which is executed onload. So we have one point where you can have the markup for the graphic and the animation logic.

I'm preparing a fork to show some examples.

[fantic]

Pls stop spam me

Dne úterý 17. února 2015 jolic notifications@github.com napsal(a):

@maxwellito https://github.com/maxwellito
Yes, with my patch vivus works with an tag!

The benefit is that you can keep the svg file as an external reference and
the svg can have javascript code inside the svg file which is executed
onload. So we have one point where you can have the markup for the graphic
and the animation logic.

I'm preparing a fork to show some examples.

—
Reply to this email directly or view it on GitHub
#24 (comment).

[maxwellito]

@fantic Sorry about that, but you're not even part of this issue. You should unwatch this repo and review your notification settings.

[jolic]

hi, i've made a patch:

https://github.com/jolic/vivus/tree/master/_PATCH

btw... how can i create a page on github to show the html file directly?

[maxwellito]

To create a page on GitHub use the gh-pages branch as http server. This will automatically update the github.io page.

About your trick, now I understand how it works. I was quite curious about the possibility to update a DOM of an object element. Tbh, I'm not really fan to oblige devs to update their SVGs to make it work dynamically (especilly to include scripts into it). But some people might be interested and it doesn't involve massive changes on the code. I'll have a closer look this weekend, it looks interesting :-)

[jolic]

Good. ;)

In my opinion all logic to control a graphic should reside inside the graphic as we can do this with SVG. See the SVG graphic as a class. The SVG provides some methods to control whatever you want to do with it. Like a Flash SWF where you can define methods which are available from outside.

So, if the SVG needs the Vivus js file or whatever it should import it, not the referencing page which uses the SVG. And the SVG should deliver methods to control the graphic.

Have a look at a simple watch as SVG. With SVG you can animate the second, minute and hour with SVG or JS inside the SVG. What if you want to display a custom timezone? The better way is to put the logic to position the elements within the SVG. So, with this example you could do something like this (in pseudo code):

my.html:
-----------
-import svg
-js: 
svg=get the svg onload;
svg.getElm().setTime({ datetime:'2015-02-19 09:05:02', title:'Paris' }).start();
svg.getElm().stop()...setTheme('xyz')...orwhatever()...

clock.svg:
-------------
-import all needed js stuff or write your own inside
-all logic to animate/manipulate

With this you have one point of code for the manipulation which is loaded within the SVG and the graphic works alone (as long as it's placed as <object>).

Thanks

[jolic]

just added another example with Vivus.prototype.setStrokeColor

https://github.com/jolic/vivus/tree/master/_PATCH

[jolic]

I made a github page http://jolic.github.io

I will not spam you here anymore. ;)

If you need help in node/JS contact me....

[maxwellito]

This bug is now fixed in the last release.