一个文件中的多个 svg 图像会破坏文本答案

【问题标题】：multiple svg images in one file breaks text一个文件中的多个 svg 图像会破坏文本
【发布时间】：2015-07-31 20:33:07
【问题描述】：

我有一个网络应用程序，它使用 SVG 文件将各种数据映射到我们的底层实验数据集。每个 SVG 文件代表一种类型的数据到实验数据集的映射，并且在网站上的大多数页面中，它们一次显示一个，各种节点带有工具提示，以使地图更具信息性并链接到相关数据。

我想添加一个可以并排比较地图的页面，这意味着在同一页面上拥有多个独立的 SVG。但是，当我这样做时，这些文件似乎会互相影响，因为只有页面上的第一个 SVG 会在标签和轴中显示正确的文本。其余的似乎继承了第一张图片中使用的字母表，使坐标轴和标签变得乱码和荒谬。

下面的 sn-p 显示了我当前如何在页面中嵌入 SVG。当用户在下拉菜单上选择地图时，对象块会通过 javascript/ajax 加载 SVG 内容。除了提到的 SVG 文本问题外，一切都正常运行。

<object id="map" name="map" class="compBuild" width=800 height=460></object>

Javascript：

$(document).on("change", ".db_field", function(e) {
    var tmp = this.name.split("_");
    var field = "map_" + tmp[1];
    $(document.getElementById(field)).load(getSvgUrl($(this).val()));
    // getSvgUrl just makes a Jquery AJAX call to obtain the location of
    // the SVG file.
})

从给出的代码中可能并不明显，但页面上实际发生的是菜单和对象块是动态生成的，因此实际的下拉菜单和对象块被寻址为 mapSelect_X map_X，其中 X 是附加的数字创建块时。（为简洁起见，代码未显示！）

我想知道是否有解决方法，因为我宁愿不将 SVG 文件转换为图像，因为我会失去 SVG 中的功能。任何帮助，将不胜感激。谢谢！

【问题讨论】：

加载对象的代码在哪里？
我已将 Javascript 添加到原始消息中。
SVG 不是 html。我认为当您使用 ajax 将它们视为 html 时，这是您的问题。
AJAX 调用所做的只是提供文件的位置，该文件由 Web 服务器作为静态 XML 内容提供。请参阅下面的答案以了解问题的根源：显然 SVG 被认为是整个文档的一部分，而不是作为离散实体，因此符号中的 id 属性之间存在重叠的事实定义有问题。

标签： javascript jquery css svg

【解决方案1】：

检查两个 SVG 中没有重复的 id 属性。 ids 在页面上必须是唯一的，否则任何使用 id 引用的 SVG 功能（如 <use>、渐变等）都不能被信任指向正确的东西。

由于 Chrome 和 FF 处理重复 id 的方式不同，一个快速的检查方法是查看两个浏览器是否以不同的方式呈现两个 svg 页面。

【讨论】：

这是有道理的。我刚刚比较了两个文件，并且在每个文件中为文本字符定义分配了 id，遵循相同的约定：id="glyph0-1", ..., id="glyph0-N"。我猜 XML 标准不会将 SVG 文件视为单独的图像，而是将其视为整个 DOM 的一部分？我不会猜到这一点，但我想这是有道理的，并且可能是“正确”的事情！无论如何，知道是这种情况，我想我应该能够重新分配这些 id 以确保它们对于每个文件都是唯一的。希望……
尤里卡！只需在每个符号的 id 上附加一个随机整数，一切都很好。感谢一百万为我指明了正确的方向！
您正在使用$().load() 将 SVG 文件导入页面。因此 SVG 内容正在成为页面 DOM 的一部分。这就是 ID 的唯一性很重要的原因。