未定义文本路径上 href 的 SVG 命名空间前缀 xlink答案

【问题标题】：SVG Namespace prefix xlink for href on textpath is not defined未定义文本路径上 href 的 SVG 命名空间前缀 xlink
【发布时间】：2015-07-05 06:25:51
【问题描述】：

所以我正在尝试制作一个简单的文本路径 .svg，它是一条带有一些文本的垂直线。我遇到的问题是标签似乎把所有东西都扔掉了。我认为这与我的 xlink:href 有关，但我似乎无法确定到底是什么。

<svg version="1.1"
     baseProfile="full"
     width="20" height="600"
     xmlns="http://www.w3.org/2000/svg">
     
   <defs>
          <path id="testPath" d="M 10 10 L 10 600 z"
         stroke="black" stroke-width="3" />
   </defs>
   
   <text>
      <textpath xlink:href="#testPath">
         teeeest
      </textpath>
   </text>
   
</svg>

任何帮助将不胜感激。

【问题讨论】：

并且由于某种原因，它在这里的代码编辑器中工作得非常好，而实际上在网络浏览器中却没有。 =(
“标签似乎抛弃了一切”是模糊的。我在您的演示中看到垂直路径中的文本。期望的行为是什么？你试过什么？

标签： html svg

【解决方案1】：

因为浏览器知道 xlink 命名空间，所以您的示例可以在浏览器中很好地内联。

如果您的 SVG 是外部文件，则执行更严格的 XML 解析，并且必须定义所有使用的命名空间。

您需要做的就是将 xlink 命名空间的定义添加到最外层的 <svg> 元素。

<svg version="1.1"
    baseProfile="full"
    width="20" height="600"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">

【讨论】：

这应该是公认的答案，因为它解决了问题。

【解决方案2】：

SVG 是一种区分大小写的语言，因此 textpath 实际上需要写成 textPath。

如果将 SVG 嵌入 html 中，则不需要命名空间，因为 html 不支持它们（与 xhtml 不同）。如果您有独立的 SVG，您还需要在根 <svg> 元素上使用 xmlns:xlink="http://www.w3.org/1999/xlink"。

【讨论】：