javascript - 转义 SVG 以嵌入文本

Question

我有一个 SVG 文档，其中包含一个如下所示的组：

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

[SPX][departure] 在运行时被 JavaScript 映射中的适当值替换。我如何输入类似的数据作为填充值，例如

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

Answer 1

为什么不直接向元素添加一个类呢？

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

然后，您可以简单地执行以下操作：

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

如果你想保留你的占位符[SPX][color]，你可以这样做：

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");
    }
}

请注意，此代码实际上并不是那么高效，因为它遍历了所有 DOM 元素。所以你应该根据你现有的代码来改变它（例如只获取textArea元素......）。