svg文本入门
本帖最后由 马黑黑 于 2022-3-15 12:29 编辑 <br /><br /><p>svg 可以非常方便地输出文本，看下面示例，我们可以用在HTML文档中保存并运行这些代码：<br><br><p><svg width="200" height="40" style="border: 1px solid;"><br>
<text>不识庐山真面目</text><br>
</svg><br><br>效果如下：<br><br></p>
<svg width="200" height="40" style="border: 1px solid;">
<text>不识庐山真面目</text>
</svg>
<p><br>我噻，只见其脚，未见其身！莫非svg的text标签怕丑？非也，svg的旗下标签 text 要定义xy坐标，且文本的y坐标是针对文字的底部基线（baseline），所以我们需要设置一下xy，设置依据与文本大小有关联，y坐标值要大于等于font-size值。上面的代码改装一下：<br><br></p>
<p><svg width="200" height="40" style="border: 1px solid;"><br>
<text x="10" y="25">不识庐山真面目</text><br>
</svg><br><br>效果就会不一样：<br><br></p>
<svg width="200" height="40" style="border: 1px solid;">
<text x="10" y="25">不识庐山真面目</text>
</svg>
<p><br>现在，文本上半身下半身都齐了，完美。<br><br>我们已经知道，svg是基于图形的，但与canvas画布不同的是，它输出的文本是文本，可以选择、复制。它与画布相似的地方也真不少，拥有给我们带来便利的诸多属性设置，例如：<br><br>stroke：边框颜色<br>fill：填充颜色<br><br>现在，我们试着把文字大小弄大一点，然后用以上属性修饰文本效果。我们先用fill给文本填充颜色：</p>
<p><svg width="500" height="80" style="border: 1px solid;"><br>
<text x="10" y="60" font-size="60" fill="navy">不识庐山真面目</text><br>
</svg><br><br>效果：</p>
<svg width="500" height="80" style="border: 1px solid;">
<text x="10" y="60" font-size="60" fill="navy">不识庐山真面目</text>
</svg>
<p><br>再用 stroke 给文本描边，填充颜色设置为没有：<br><br></p>
<p><svg width="500" height="80" style="border: 1px solid;"><br>
<text x="0" y="60" font-size="60" fill="none" stroke="red">不识庐山真面目</text><br>
</svg></p>
<p><br>效果是酱紫：</p>
<svg width="500" height="80" style="border: 1px solid;">
<text x="0" y="60" font-size="60" fill="none" stroke="red">不识庐山真面目</text>
</svg>
<p>接着填充描边一块用，顺带设置一下字体、字重：<br><br><svg width="500" height="80" style="border: 1px solid;"><br>
<text x="10" y="60" font-size="60" fill="navy" stroke="red" font-family="MicrosoftYahei" font-weight="900">不识庐山真面目</text><br>
</svg><br><br>看看效果：<br><br></p>
<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>
<p><br>但作为更倾向于图形特性的svg，与画布一样，文本不能自动折行，这意味着我们要控制每行文本的长度，并学会通过改变text的y坐标值来给文本分行：<br><br></p>
<p><svg width="500" height="160" style="border: 1px solid;"><br>
<text x="10" y="60" font-size="60" fill="navy" stroke="red" font-family="MicrosoftYahei" font-weight="900"><br>
不识庐山真面目<br>
</text><br>
<text x="10" y="140" font-size="60" fill="navy" stroke="red" font-family="MicrosoftYahei" font-weight="900"><br>
只缘身在此山中<br?
</text><br>
</svg><br><br>效果：<br><br></p>
<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">
只缘身在此山中
</text>
</svg>
<p><br>text标签还有两个有趣的位移属性 dx 和 dy，分别用于文字个体水平方向和垂直方向的位移，这里我们测试一下给每一个字设置一下dy值：<br><br></p>
<p><svg width="500" height="160" style="border: 1px solid;"><br>
<text x="10" y="100" font-size="60" fill="navy" dy="-20 -10 10 20 25 -5 -15">不识庐山真面目</text><br>
</svg><br><br>效果：<br><br></p>
<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>
<p>OK，先介绍这么多吧。</p>
text标签的dy属性其实就是文本的路经，对应于其父元素下svg下的path路经中的d属性（画心时介绍过） 反正也学不会，俺坐这独享了{:4_174:} 樵歌 发表于 2022-3-15 13:49
反正也学不会，俺坐这独享了
嗯嗯，可以的可以的 这个命令规定了文字的展现路径，非常神奇的命令。感谢黑黑又带来新效果{:4_187:} 设置雅黑还真不如不设字体更好看，不知道默认的是什么字体，感觉比雅黑好看{:4_173:} 红影 发表于 2022-3-15 18:44
设置雅黑还真不如不设字体更好看，不知道默认的是什么字体，感觉比雅黑好看
不会吧？微软雅黑挺好看的 马黑黑 发表于 2022-3-15 19:01
不会吧？微软雅黑挺好看的
我喜欢不设置的那个字体，看着秀气。 红影 发表于 2022-3-15 22:02
我喜欢不设置的那个字体，看着秀气。
那也是微软雅黑啊，只是不把他设为肥胖 马黑黑 发表于 2022-3-15 22:11
那也是微软雅黑啊，只是不把他设为肥胖
哈哈，就因为这个字体带个黑字，你就这么为它说话啊{:4_173:} 红影 发表于 2022-3-16 09:17
哈哈，就因为这个字体带个黑字，你就这么为它说话啊
不是啊，最初我也觉得微软雅黑不太好，我再讨论Emeditor的时候也说过的，还有一位坛友，不记得是谁了，说字体各有各的好看，当时我还不怎么接受。最近做文本效果集中营，我体会到了，微软雅黑的设计还是很科学的。其实微软雅黑是中国人设计的，方正的作品。 马黑黑 发表于 2022-3-16 09:32
不是啊，最初我也觉得微软雅黑不太好，我再讨论Emeditor的时候也说过的，还有一位坛友，不记得是谁了，说 ...
我是觉得它的点不够圆润，线条不够柔和{:4_173:} 红影 发表于 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里是允许使用的{:4_173:} 红影 发表于 2022-3-17 16:00
是的，很少去设置字体，主要不知道都有那些字体在H5里是允许使用的
都允许使用，问题是访问者有木有这个字体，木有的话，系统会给他一个字体。所以通常会设置几个备用字体的。 挺漂亮的字体。谢谢老黑！{:4_199:}