SVG中的textPath元素

本文作者: jsweibo

本文链接: https://jsweibo.github.io/2019/12/29/SVG%E4%B8%AD%E7%9A%84textPath%E5%85%83%E7%B4%A0/

摘要

本文主要讲述了：

作用
attribute

正文

作用

作为<text>的子元素，在<text>中沿着<path>绘制文本

attribute

href

<path>的 id

示例：

<svg width="300" height="150" xmlns="http://www.w3.org/2000/svg">
    <path id="foo" d="M 50 50 L 60 75 100 125 150 140" style="fill:none;stroke:#000"/>
    <text>
        <textPath href="#foo">0123456789</textPath>
    </text>
</svg>

startOffset

起始偏移值

示例：

<svg width="300" height="150" xmlns="http://www.w3.org/2000/svg">
    <path id="foo" d="M 50 50 L 60 75 100 125 150 140" style="fill:none;stroke:#000"/>
    <text>
        <textPath href="#foo" startOffset="25%">0123456789</textPath>
    </text>
</svg>

textLength

文本框长度

示例：

<svg width="300" height="150" xmlns="http://www.w3.org/2000/svg">
    <path id="foo" d="M 50 50 L 60 75 100 125 150 140" style="fill:none;stroke:#000"/>
    <text>
        <textPath href="#foo" textLength="150">0123456789</textPath>
    </text>
</svg>

lengthAdjust

当设置了文本框长度后，如何调整文本框内的字符间距和字符大小

spacing 仅调整字符间距，默认值
spacingAndGlyphs 同时调整字符大小和字符间距

示例：

<svg width="300" height="150" xmlns="http://www.w3.org/2000/svg">
    <path id="foo" d="M 50 50 L 60 75 100 125 150 140" style="fill:none;stroke:#000"/>
    <text>
        <textPath href="#foo" textLength="150" lengthAdjust="spacing">0123456789</textPath>
    </text>
</svg>

示例：

<svg width="300" height="150" xmlns="http://www.w3.org/2000/svg">
    <path id="foo" d="M 50 50 L 60 75 100 125 150 140" style="fill:none;stroke:#000"/>
    <text>
        <textPath href="#foo" textLength="150" lengthAdjust="spacingAndGlyphs">0123456789</textPath>
    </text>
</svg>