CODEWITHSUNDEEP
javascriptsvgescaping
ipavlic
ipavlic

Reputation: 4966

Escaping SVG to embed text

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>

Upvotes: 0

Views: 256

Answers (1)

Aletheios
Aletheios

Reputation: 4020

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...).

Upvotes: 1

Related Questions