SVG shapes in Lectora 17
April 16, 2017 12:00 AM
Ok, so quite some elements now in Lectora 17 are SVG. Thats good. But now i want to make use of the fact its SVG and change the color of an element on runtime ( just to name an option ). When checking the html when published i can find an id for the DIV its in, target that...do whatever i want to it...but having some trouble so far accessing the SVG inside it to do something to that...
If anyone can up with some tips, that would be nice...
Regards,
Math
Discussion (9)
In the search for this a small step further. Apparently there is a difference in how SVG is treated compared to normal HTML elements. You have a SVGDom opposite to the normal Dom for specific SVG content. Further you cannot use JQuery as is on the SVGDom because that isnot supported in JQuery. So now to find a solution to target the default SVGs created in Lectora and change them....
I don't know why the right quote around 'fill' looks like it's a double, in the editor it is not.
The difference between Chrome and IE,Edge and Firefox in 'Seamless Publishing' mode is, that Chrome creates the pages like this:
undefineddiv class="pageDIV" id="page2" style="overflow: hidden; visibility: inherit;">
The id is here 'page2' and i do think here it goes wrong with a lot of scripts in combo with seamless.
Allthough i cannot find any spot in your script where the pageDIV is called, so do think this is weird.
In my own scripts i do use it often, replaced that now by using GetCurrentPageID() or getCurrentPageDIV()
These Lectora functions work properly crossbrowser.
But again, i donot see where to replace this in your setup ;-)
For shape40 try - $('#shape40 svg path').css('fill','#ff0000').
undefined
Nice Darrel, but it only works in Chrome ;-)
undefined
Correction: in preview and published normally it works in all browsers.
When published 'Seamless' it only works in Chrome..probably due to a targeting issue....
:-) Offcourse thats the easy way..and for this one it sure works...but do want to use seamless in projects, so need to somehow figure out whats aching scripting when using seamless. Most of my scripts i can get to work by adding parent to document and window related code..and by using getParentDIV() for getting to the 'pageDIV'... so i do wonder why your sample aint working in the other browsers... might have to do with jQuery somehow... although i use jQuery in my setups too...and can get it to work...well some puzzling to do :-)
Do like the ;-) in the function() Tim...
And indeed this makes it work perfectly with IE, Firefox and Edge.
Great. Thx Tim...
Discussions have been disabled for this post