svg 缩放_使用可缩放矢量图形（SVG）中的文本

在之前的文章中，我们使用SVG来创建shapes 。 如标题中所述，在本文​​中，我们将研究使用SVG创建Text 。 除了普通HTML文本所能提供的功能之外，我们还可以对文本进行很多处理。

因此，让我们检查一下。

基本实施

但是，在继续之前，让我们看看SVG中的Text是如何在其最基本的层次上形成的：

<svg>
<text x="0" y="15">This is Scalable Vector Graphic (SVG) Text</text>
</svg>

从上面的代码片段中可以看到，SVG中的文本是用足够逻辑的标签<text> 。 这个元素基本上只需要x和y属性来指定基线坐标。

这是文本的外观。 目前看来，它与HTML中的常规文本没有什么区别。

基本文字样式

文本还可以使用CSS属性设置样式，例如font-weight ， font-style和text-decoration ，这些属性可以通过内联样式，内部样式或外部样式来实现，就像我们在上一篇关于样式化SVG的文章中所讨论的那样。 与CSS 。 以下是一些示例。

胆大

<text style="font-weight: bold;">This is text in Scalable Vector Graphic (SVG)</text>