一个文件中的多个SVG图像会破坏文本

multiple svg images in one file breaks text

本文关键字：图像 SVG 文本 一个 文件      更新时间：2023-09-26

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

我想添加一个可以并排比较地图的页面，这意味着在同一页面上有多个自包含的SVG。但是，当我这样做时，这些文件似乎会相互冲突，因为只有页面上的第一个SVG在标签和轴中显示正确的文本。其余的似乎继承了第一张图像中使用的字母表，使轴和标签乱码和无意义。

下面的代码片段显示了我目前如何在页面中嵌入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的功能。任何帮助都会很感激。谢谢!

检查两个svg中id属性是否重复。id在页面上必须是唯一的，否则任何使用id引用的SVG功能(如<use>, gradients等)都不能被信任指向正确的东西。

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

相关文章：