为什么 SVG 中的同文档引用受 HTML <base> 标签的影响？答案

【问题标题】：Why is same-document reference in SVG affected by HTML <base> tag?为什么 SVG 中的同文档引用受 HTML <base> 标签的影响？
【发布时间】：2011-11-26 03:04:42
【问题描述】：

我有一个带有<base> 标签的 HTML 页面，也包含 SVG。 SVG 中的以下相同文档引用会失败：

<html>
  <head>
    <base href="http://my/server/basedir">
  </head>
  <body>
    <svg>
      <g>
        <path d="M100,100 L150,150" id="path"/>
        <text>
          <textpath xlink:href="#path"/>
        </text>
      </g>
    </svg>
  </body>
</html>

xlink:href="#path" 引用无法解析。如果没有 HTML base 元素，这可以正常工作。如果我用绝对 IRI 后跟片段标识符替换 textpath 元素上的 href 属性，它也可以工作。

在我看来，SVG 应该区别对待相同文档的 IRI，并且独立于 HTML base。在http://www.w3.org/TR/xmlbase/#same-document 中，它说“取消引用同一文档引用是专门处理的。”尽管这是在xml:base 的上下文中授予的。顺便说一句，我尝试在 svg 元素上添加一个 xml:base，希望覆盖 HTML 的 base 设置，因为无法弄清楚如何使它工作。

【问题讨论】：

标签： svg uri fragment-identifier

【解决方案1】：

案例一：没有xml:base

适用于 IE(Edge)、Chrome，但不适用于 Firefox。

<html>
  <head>
    <base href="http://my/server/basedir">
  </head>
  <body>
    <svg width="300" height="300" xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
      <g>
        <path d="M100,100 L150,150" id="path"/>
        <text>
          <textpath xlink:href="#path">Hello</textpath>
        </text>
      </g>
    </svg>
  </body>
</html>

案例 2：xml:base

适用于 IE(Edge)、Chrome、Firefox。

如果此页面 url 是 http://my/thisfile.htm，则在 svg 标签或 textpath 标签上设置 xml:base="http://my/thisfile.htm"。

<html>
  <head>
    <base href="http://my/server/basedir">
  </head>
  <body>
    <svg width="300" height="300" xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     xml:base="http://my/thisfile.htm">
      <g>
        <path d="M100,100 L150,150" id="path"/>
        <text>
          <textpath xlink:href="#path">Hello</textpath>
        </text>
      </g>
    </svg>
  </body>
</html>

【讨论】：

xml:base 已弃用 bugs.chromium.org/p/chromium/issues/detail?id=341854