Change an Illustrator SVG inside Storyline with GSAP

Hi Math,

How are you?

I really like your post here and your solution!

I have a question though...

I take it that it is possible to write some javascript that when you click a button, it changes the colour of a textbox?

Thanks

Keith

Luckily the change to target the inner SVGs from an imported Illustrator SVG are easy.

https://360.articulate.com/review/content/8d933ab6-3f92-4111-ab30-87d01d879956/review

As it selected only the upper 'bodyColor' element, to target all the paths inside it... is just a case of checking the HTML setup and adding needed code.

With these lines of code you now can select any part of a SVG and change the color of it. And in fact any attribute of the SVG, but showing that later. Keep in mind however that grouping and naming your elements in Illustrator is imminent, else its tough to select.

selectAllSVGelements("bodyColor");

function selectAllSVGelements(partialID){
var svgCollection = document.querySelectorAll("[id*='"+partialID+"'] > path:nth-child(n)");
     for(var i = 0; i < svgCollection.length;i++){
            gsap.to(svgCollection[i], {duration:2, strokeWidth:8, stroke: "#984807" ,fill:"#77F27B"});
     }
}

Added the Story.

The illustrator with groups.

Almost there ;-) 
https://360.articulate.com/review/content/95c7ceb6-6e90-4b7b-a838-34762497829f/review

Only changing the strokes now... have to focus on something else right now...but we almost have it :-)

Luckily no need for any extra scripts or workarounds i guess. CTRL+G -> grouping and naming layers you want to trigger in Storyline in Illustrator ( as seen in the image ) and using the SVG Options as shown, will result in a proper id for those groups in the SVG. Have to test it first though.

Only thing i am missing...is no need for injecting custom wrapper into the Illustrator svg or possibly a Illustrator script that automatically exports the SVG with the added wrapper. As that makes it way easier for non-scripters to use.

Apparently a script isnot that hard... this is a basic SVG export script from Illustrator.
Just have to figure out how and where to add the custom wrapper...

function exportFileAsSvg(path) {
    const options = new ExportOptionsWebOptimizedSVG();
    options.compressed = false;
    options.coordinatePrecision = 3;
    options.cssProperties = SVGCSSPropertyLocation.PRESENTATIONATTRIBUTES;
    options.fontSubsetting = SVGFontSubsetting.None;
    options.fontType = SVGFontType.SVGFONT;
    options.svgResponsive = false;

    app.activeDocument.exportFile(new File(path), ExportType.WOSVG, options);
}

exportFileAsSvg("X:\\foo.svg")

Aha :-) So step by step we decrypt Storyline's hidden world :-)

and found

they use the #... feature only for clipping in a central "mask-library" - it's not the modern shadow-DOM feature

the firefox debugger does not seem to distinguish between the two

with

document.querySelectorAll('[data-mermaid')[0].classList.add("mystyle");

I could modify the DOM tree - it seems possible to write into the 'closed' DOM

... I am searching always the javascript part, where they create the DOM for the svg - they don't use ".attachShadow" ???