更改部分 HTML 文档的相对路径基础，特别是对于注入的 SVG？

【问题标题】：Change relative path base for part of an HTML document, especially for injected SVG?更改部分 HTML 文档的相对路径基础，特别是对于注入的 SVG？
【发布时间】：2020-07-04 22:43:39
【问题描述】：

如何仅更改部分文档的基本 URL 路径？或者至少对于 SVG 部分。

特别是，我正在加载一个 SVG 文件，并将其内容注入当前文档（这是通过 JavaScript 完成的）。该 SVG 使用相对的 xlink:href 属性链接到外部资产。然而，由于注入，该文件不知道它是从哪里加载的，并解析相对于文档 URL 的路径。这就是为什么我需要在文档的这一部分中创建相对于加载 SVG 的 URL 的相对路径。

【问题讨论】：

标签： javascript html svg

【解决方案1】：

有 <base> 元素，但它会影响整个文档，并且每个文档只能有一个，因此在您的情况下不是一个好的候选者。

我看到的唯一解决方法（除了更改所有 URL）是在他们自己的文档中注入您的 svg，例如使用 <iframe>，您也可以在其中注入这样的 <base> 元素。

const svg = `<svg>
  <image xlink:href="PNG_transparency_demonstration_1.png" height="150" width="150"/>
</svg>`;
const base = `https://upload.wikimedia.org/wikipedia/commons/4/47/`;

document.querySelector('iframe').srcdoc = `<base href="${base}">
${svg}`;

&lt;iframe&gt;&lt;/iframe&gt;

Ps：在 svg 元素中有 xml:base attribute，但它已被弃用，老实说，我不知道是否有任何浏览器在 HTML 文档中支持它。

【讨论】：