Change an Illustrator SVG inside Storyline with GSAP

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.

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