在 HTML 页面中动态加载的多个 SVG 文档答案

【问题标题】：Multiple SVG document loaded dynamically in an HTML page在 HTML 页面中动态加载的多个 SVG 文档
【发布时间】：2023-03-29 17:55:01
【问题描述】：

我在 HTML 页面中动态加载多个外部 SVG 文档并将它们内联。但是第一个 SVG 文件中定义的线性渐变“污染”了后续 SVG 文件中使用相同 id 定义的线性渐变。这意味着第一个加载的使用 ID 定义的线性渐变会覆盖其他文件中使用相同 ID 定义的其他线性渐变。当 HTML 页面中有多个内联 SVG 时，如何对内联 SVG 进行沙箱处理？

注意：在 SVG 标签周围使用 embed 标签时，它们不会相互“污染”

【问题讨论】：

标签： html svg

【解决方案1】：

很遗憾，您必须确保您的 ID 在文档中是唯一的。这是 HTML、SVG 和任何其他可以像这样混合在一起的标记的限制。

如果您使用服务器端脚本将 SVG 文件注入到您的 HTML 标记中，用唯一的 ID 替换 ID 应该不会太糟糕。

您可能还想在这里查看 importSvgString() JS 函数：http://code.google.com/p/svg-edit/source/browse/trunk/editor/svgcanvas.js?r=1619#7262

【讨论】：

【解决方案2】：

如果您使用 SVG 注入器使您的 SVG 内联，则此问题将由 SVG 注入器处理。 SVGInject 为每个内部使用的 ID 添加一个随机后缀以避免冲突（例如 gradient1 可能变为 gradient1--inject-HcdE8d27）。

【讨论】：

【解决方案3】：

试试这个

var matrixElementos = new Array(30000);
matrixElementos[0]= Snap("#svg");
matrixElem` s`entos[1]= Snap("#svg2");

【讨论】：