Question

I have a SVG document that contains a group that looks like this:

<g xml:id="id10883">
     <textArea fill="#ffffff" xml:id="id1900" xml:space="preserve">[SPX][departure]</textArea>
</g>

[SPX][departure] is replaced on runtime by appropriate values from a JavaScript map. How could I input similar data as a fill value, e.g.

<g xml:id="id10883">
     <textArea fill="[SPX][color]" xml:id="id1900" xml:space="preserve">[SPX][departure]</textArea>
</g>

Answer 1

Why don’t you just add a class to the element(s) instead?

<g xml:id="id10883">
    <textArea class="spx_color" xml:id="id1900" xml:space="preserve">[SPX][departure]</textArea>
</g>

Then you could simply do the following:

var spx_color = document.getElementsByClassName("spx_color");
for (var i = 0, l = spx_color.length; i < l; ++i) {
    spx_color[i].setAttribute("fill", "#ffffff");
}

If you want to keep your placeholder [SPX][color] though, you could do something like this:

var elements = document.getElementsByTagName("*");
for (var i = 0, l = elements.length; i < l; ++i) {
    if (elements[i].getAttribute("fill") == "[SPX][color]") {
        elements[i].setAttribute("fill", "#ffffff");
    }
}

Note that this code isn’t really that efficient as it iterates over all DOM elements. So you should change that depending on your existing code (e.g. only get textArea elements…).