Question

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

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

[SPX] [离开]在运行时被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元素...）。

转义SVG以嵌入文本

1 个答案: