SVG Text

如何使用tref元素重用SVG文本

写一次SVG代码,然后在多个地方重用,可以帮助你写出更多模块化的代码,而且它也有助于维护。通过tref元素,SVG可以很方便地重用text元素的内容。上周我大概讲解了tspan元素,并通过几个实例讲了如何使用它来单独给文本添加样式和定位。几个示例中都使用了位置属性——xydxdy,还提到了其它几个属性。我们现在来讲讲剩下的两个属性,然后再讲讲使用tref元素重用SVG文本。不过注意tref元素是SVG 1.1规范的一部分,它已经从SVG 2.0规范中删除了。我在这里介绍它,也许哪天你就碰到它了呢。

如何使用tspan元素给SVG文本添加样式、定位

SVG的<text>元素允许你很简单地定位和给文本添加样式,但是如果你想要针对文本的不同部分定位和添加样式呢?难道我们要去创建多个text元素吗?不需要的。有更简单的方式,tspan来拯救世界了。前两周我们已经看了SVGtext元素,并整理了几个我们可以使用的属性<text>元素不是唯一的SVG文本显示的方式。今天我们来讨论另外两种可以结合<text>元素使用的SVG元素——<tspan><tref>

如何操作SVG Text

上周我们学习了如何使用<text>元素创建SVG文本。在实例中我们设置了xy坐标来定位文本,也尝试了给SVG文本中的每个字符定位。关于<text>元素还有很多内容。在处理SVG文本时,不要局限于xy属性。<text>元素还有几个可以添加的属性,现在我们开始讨论吧。

如何使用SVG Text

SVG文本是将图形和文本两者结合得最好的东西。它可以像其它图形元素一样渲染,这样你可以添加描边和填充,像图形、线条和箭头那样。它还可以被打包成XML字符数据,也就是说它是真的文本。

返回顶部