Storyline SVG Icons
Jan 10, 2021
Someone asked about how to change the color of Storyline icons. So i mocked up a sample to show how you can target Storyline SVG icons and color them with Javascript. When getting that done i noticed Storyline uses 2 different methods to setup the icons. Some are a simple straightforward SVG. So that worked without any problem. But others were groups of SVG-elements combined to create a single icon. So i had to get that working somehow to. I did, but funny side-effect of my random colorpart i added is that now each element of the grouped SVGs get a seperate color ;-)
https://360.articulate.com/review/content/ca5af34c-5c88-4b52-846c-2a754a9a5576/review
Change the accessibility name in the inputfield and click 'color icon' to see it working. When i fixed the randomness for the grouped icons im gonna share the Storyline.
3 Replies
Luckily it was quite easy to fix the randomness...
https://360.articulate.com/review/content/66f32775-64b5-44b0-a935-b49ba02ff66f/review
And here is the Storyline as is...
Wow, this opens up so many possibilities! Thanks!
As Articulate changes structure in HTML on updates without notice to users, the original here doesnot work in the latest version of Storyline. In fact you need to doublecheck any Javascript code from older projects whenever opening them up in a newer Storyline. Personally i hate that. They should at least document these kind of changes and let us users know.
But fixed the original and here is an updated version.