Instead of loading multiple SVGs of difference color but the same svg, I’d like to be able to swap out the fill color dynamically. How to do this please?
As I recall scripts don’t allow adjusting the CSS of an SVG loaded from a file, but if you embed it in a page then CSS can style it as normally and dynamically as you want? Nothing specific to phoenix, all normal HTML stuff.
Maybe not a direct answer to the question but might give you some ideas
In Dave Thomas’s excellent course…
there is a hangman game where parts of the hangman image opacity changes as the game goes along. This is done by putting EEX templating inside the SVG…
... <path id="rope" style="<%= turn(@left, 6) %>; fill: #a28d5d; stroke: #a28d5d" ...
turn() function returns a different opacity depending on the arguments passed.
The image has a
.hml.eex extension so that Phoneix will process it as any other templates.
That’s the conclusion I came to. Whatever you pass in will be available in the template using the