Skip to content

Latest commit

 

History

History
76 lines (58 loc) · 2.18 KB

20.SVG-textpath元素.md

File metadata and controls

76 lines (58 loc) · 2.18 KB
Raw

SVG textpath元素

SVG<textpath>元素用于沿着路径（例如圆上）布局文本。这看起来非常的酷。不同浏览器沿着路径呈现文本的方式有一点区别，因此请务必检查你的文本在你计划支持的所有浏览器中的效果。

示例如下：

<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">


    <defs>
        <path id="myTextPath"
              d="M75,20
                 a1,1 0 0,0 100,0
               "
                />
    </defs>

    <text x="10" y="100" style="stroke: #000000;">
      <textPath xlink:href="#myTextPath" >
            Text along a curved path...
      </textPath>
    </text>

</svg>

最终图片如下：

Text along a curved path...

可以看到，（<defs>元素内的）<path>元素有一个id属性。并且在<textpath>元素的xlink:href属性上对其引用。

如果路径比文本短，则仅绘制路径长度内的部分文本。

你还可以使用更高级的路径。下面是一个更复杂的文本路径示例：

<defs>
    <path id="myTextPath2"
          d="M75,20 l100,0 l100,30 q0,100 150,100"/>
</defs>

<text x="10" y="100" style="stroke: #000000;">
    <textPath xlink:href="#myTextPath2">
        Text along a more advanced path with lines and curves.
    </textPath>
</text>

此例定义了一条由水平线、折线和曲线组成的文本路径。

最终图片如下：

<text x="10" y="100" style="stroke: #000000;">
    <textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#myTextPath2">
        Text along a more advanced path with lines and curves.
    </textPath>
</text>