svg文本入门

马黑黑

svg 可以非常方便地输出文本，看下面示例，我们可以用在HTML文档中保存并运行这些代码：

<svg width="200" height="40" style="border: 1px solid;">
    <text>不识庐山真面目</text>
</svg>

效果如下：

我噻，只见其脚，未见其身！莫非svg的text标签怕丑？非也，svg的旗下标签 text 要定义xy坐标，且文本的y坐标是针对文字的底部基线（baseline），所以我们需要设置一下xy，设置依据与文本大小有关联，y坐标值要大于等于font-size值。上面的代码改装一下：

<svg width="200" height="40" style="border: 1px solid;">
    <text x="10" y="25">不识庐山真面目</text>
</svg>

效果就会不一样：

现在，文本上半身下半身都齐了，完美。

我们已经知道，svg是基于图形的，但与canvas画布不同的是，它输出的文本是文本，可以选择、复制。它与画布相似的地方也真不少，拥有给我们带来便利的诸多属性设置，例如：

stroke：边框颜色
fill：填充颜色

现在，我们试着把文字大小弄大一点，然后用以上属性修饰文本效果。我们先用fill给文本填充颜色：

<svg width="500" height="80" style="border: 1px solid;">
    <text x="10" y="60" font-size="60" fill="navy">不识庐山真面目</text>
</svg>

效果：

再用 stroke 给文本描边，填充颜色设置为没有：

<svg width="500" height="80" style="border: 1px solid;">
    <text x="0" y="60" font-size="60" fill="none" stroke="red">不识庐山真面目</text>
</svg>

效果是酱紫：

接着填充描边一块用，顺带设置一下字体、字重：

<svg width="500" height="80" style="border: 1px solid;">
    <text x="10" y="60" font-size="60" fill="navy" stroke="red" font-family="MicrosoftYahei" font-weight="900">不识庐山真面目</text>
</svg>

看看效果：

但作为更倾向于图形特性的svg，与画布一样，文本不能自动折行，这意味着我们要控制每行文本的长度，并学会通过改变text的y坐标值来给文本分行：

<svg width="500" height="160" style="border: 1px solid;">
    <text x="10" y="60" font-size="60" fill="navy" stroke="red" font-family="MicrosoftYahei" font-weight="900">
        不识庐山真面目
</text>
    <text x="10" y="140" font-size="60" fill="navy" stroke="red" font-family="MicrosoftYahei" font-weight="900">
        只缘身在此山中 </svg>

效果：

text标签还有两个有趣的位移属性 dx 和 dy，分别用于文字个体水平方向和垂直方向的位移，这里我们测试一下给每一个字设置一下dy值：

<svg width="500" height="160" style="border: 1px solid;">
    <text x="10" y="100" font-size="60" fill="navy" dy="-20 -10 10 20 25 -5 -15">不识庐山真面目</text>
</svg>

效果：

OK，先介绍这么多吧。

马黑黑

text标签的dy属性其实就是文本的路经，对应于其父元素下svg下的path路经中的d属性（画心时介绍过）

樵歌

反正也学不会，俺坐这独享了

马黑黑

樵歌 发表于 2022-3-15 13:49
反正也学不会，俺坐这独享了

嗯嗯，可以的可以的

红影

这个命令规定了文字的展现路径，非常神奇的命令。感谢黑黑又带来新效果

红影

设置雅黑还真不如不设字体更好看，不知道默认的是什么字体，感觉比雅黑好看

马黑黑

红影 发表于 2022-3-15 18:44
设置雅黑还真不如不设字体更好看，不知道默认的是什么字体，感觉比雅黑好看

不会吧？微软雅黑挺好看的

红影

马黑黑 发表于 2022-3-15 19:01
不会吧？微软雅黑挺好看的

我喜欢不设置的那个字体，看着秀气。

马黑黑

红影 发表于 2022-3-15 22:02
我喜欢不设置的那个字体，看着秀气。

那也是微软雅黑啊，只是不把他设为肥胖

红影

马黑黑 发表于 2022-3-15 22:11
那也是微软雅黑啊，只是不把他设为肥胖

哈哈，就因为这个字体带个黑字，你就这么为它说话啊

马黑黑

红影 发表于 2022-3-16 09:17
哈哈，就因为这个字体带个黑字，你就这么为它说话啊

不是啊，最初我也觉得微软雅黑不太好，我再讨论Emeditor的时候也说过的，还有一位坛友，不记得是谁了，说字体各有各的好看，当时我还不怎么接受。最近做文本效果集中营，我体会到了，微软雅黑的设计还是很科学的。其实微软雅黑是中国人设计的，方正的作品。

红影

马黑黑 发表于 2022-3-16 09:32
不是啊，最初我也觉得微软雅黑不太好，我再讨论Emeditor的时候也说过的，还有一位坛友，不记得是谁了，说 ...

我是觉得它的点不够圆润，线条不够柔和

马黑黑

红影 发表于 2022-3-16 13:08
我是觉得它的点不够圆润，线条不够柔和

嗯，这是较为刚硬的字体，它同时做得中规中矩，有特色的

红影

马黑黑 发表于 2022-3-16 13:17
嗯，这是较为刚硬的字体，它同时做得中规中矩，有特色的

是的，在特殊需要的时候还是有用的。

马黑黑

红影 发表于 2022-3-16 13:38
是的，在特殊需要的时候还是有用的。

是的，看情况的

红影

马黑黑 发表于 2022-3-16 18:24
是的，看情况的

嗯，有的时候还是需要比较刚的字体的。

马黑黑

红影 发表于 2022-3-16 20:16
嗯，有的时候还是需要比较刚的字体的。

啥字体，存在即合理

红影

马黑黑 发表于 2022-3-16 21:18
啥字体，存在即合理

是的，很少去设置字体，主要不知道都有那些字体在H5里是允许使用的

马黑黑

红影 发表于 2022-3-17 16:00
是的，很少去设置字体，主要不知道都有那些字体在H5里是允许使用的

都允许使用，问题是访问者有木有这个字体，木有的话，系统会给他一个字体。所以通常会设置几个备用字体的。

加林森

挺漂亮的字体。谢谢老黑！