Question

我有一个使用SVG文件将各种数据映射到基础实验数据集的Web应用程序。每个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中的功能。任何帮助，将不胜感激。谢谢！

Answer 1

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

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

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

1 个答案: