Question

所以我试图创建一个简单的文本路径.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>

任何帮助将不胜感激。

Answer 1

SVG是一种区分大小写的语言，因此文本路径实际上需要写为textPath。

如果你在html中嵌入了SVG，那么你就不需要命名空间，因为html不支持它们（与xhtml不同）。如果您的SVG是独立的，那么您在根xmlns:xlink="http://www.w3.org/1999/xlink"元素上也需要<svg>。

Answer 2

您的示例在浏览器中可以正常工作，因为浏览器知道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">

未定义textpath上href的SVG名称空间前缀xlink

2 个答案: