语言►SVG

SVG中的text元素

本文作者: jsweibo

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

摘要

本文主要讲述了：

  1. 作用
  2. attribute

正文

作用

绘制文本

attribute

基线起点的 x 坐标，默认为0

y

基线起点的 y 坐标，默认为0

dx

x 方向上，基线相对于 x 的偏移距离

示例：

1
2
3
4
5
<svg width="300" height="150" xmlns="http://www.w3.org/2000/svg">
    <text x="100" y="100" dx="30">
        0123456789
    </text>
</svg>

dy

y 方向上，基线相对于 y 的偏移距离

示例：

1
2
3
4
5
<svg width="300" height="150" xmlns="http://www.w3.org/2000/svg">
    <text x="100" y="100" dy="30">
        0123456789
    </text>
</svg>

textLength

文本框长度

示例：

1
2
3
4
5
<svg width="300" height="150" xmlns="http://www.w3.org/2000/svg">
    <text x="100" y="100" textLength="100">
        0123456789
    </text>
</svg>

lengthAdjust

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

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

示例：

1
2
3
4
5
<svg width="300" height="150" xmlns="http://www.w3.org/2000/svg">
    <text x="100" y="100" textLength="100" lengthAdjust="space">
        0123456789
    </text>
</svg>

示例：

1
2
3
4
5
<svg width="300" height="150" xmlns="http://www.w3.org/2000/svg">
    <text x="100" y="100" textLength="100" lengthAdjust="spacingAndGlyphs">
        0123456789
    </text>
</svg>

rotate

文字的旋转角度

示例：

1
2
3
4
5
<svg width="300" height="150" xmlns="http://www.w3.org/2000/svg">
    <text x="100" y="100" rotate="180">
        0123456789
    </text>
</svg>

参考资料

本文作者: jsweibo

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

本文对你有帮助？请支持我

支付宝
微信