SVG命名空间前缀xlink在textpath的href属性上未定义。

Question

所以我想制作一个简单的文本路径 .svg，它将是一条带有一些文本的垂直线。我遇到的问题是 <defs> 标签似乎会使一切失调。我认为这与我的 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>

欢迎提供任何帮助。

- Athlos

---

由于某种原因，它在代码编辑器中完全正常，但实际上在Web浏览器中却不行。 =( - Athlos

“the tags seem to throw everything off” 是含糊的。在您的演示中，我看到文本是垂直排列的。您希望实现什么样的行为？您尝试过哪些方法？ - jmargolisvt

Answer 1

如果你的样例被内嵌到浏览器中，它会正常工作，因为浏览器知道xlink命名空间。

如果你的SVG是一个外部文件，那么将进行更严格的XML解析，并且必须定义所有使用的命名空间。

你所需要做的就是在最外层的<svg>元素中添加一个xlink命名空间的定义。

<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">

- Paul LeBeau

---

这应该是被接受的答案，因为它解决了问题。 - Joe82

Answer 2

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

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

- Robert Longson