SVG 互动版

在线工具推荐: Three.js AI纹理开发包 - YOLO合成数据生成器 - GLTF/GLB在线编辑 - 3D模型格式在线转换 - 可编程3D场景编辑器

< text > 及其属性

  在SVG中有两种截然不同的文本模式. 一种是写在图像中的文本,另一种是SVG字体。现在我们主要集中前者:写在图像中的文本。

在一个SVG文档中,元素内部可以放任何的文字。

<text x="10" y="10">Hello World!</text>

  属性x和属性y性决定了文本在视口中显示的位置。属性text-anchor,可以有这些值:startmiddleendinherit,允许决定从这一点开始的文本流的方向。

  和形状元素类似,属性fill可以给文本填充颜色,属性stroke可以给文本描边,形状元素和文本元素都可以引用渐变或图案, 相比较CSS2.1只能绘制简单的彩色文字,SVG显得更具有优势。

设置字体属性

  文本的一个至关重要的部分是它显示的字体。SVG提供了一些属性,类似于它们的CSS同行,用来激活文本选区。下列每个属性可以被设置为一个SVG属性或者成为一个CSS声明:font-familyfont-stylefont-weightfont-variantfont-stretchfont-sizefont-size-adjustkerningletter-spacingword-spacingtext-decoration