SVG绘制文本

在SVG中,通过 text 标签来绘制文本,它是一个双标签,基本语法为:尖角号 text,尖角号 /text,标签里填写文本的内容。

它的 属性 x 和 属性y,定义文本的位置坐标,值为数字。

还有两个常用属性:

font-size,定义文本的大小,值为数字。

text-anchor,定义文本的对齐方式。有三个值:start,以文本左端对齐;middle,以文本中间对齐;end,以文本末尾对齐。

我们做个例子。

新建一个文件 text.html,补全基础代码,在 body 里添加一个 svg 标签,定义属性 width 等于 300,height 等于 30。

在 svg 里添加 text 标签,text 里写入一些文本,定义属性 x 等于 0,y 等于 5,fill 等于 red。保存文件。

在浏览器中预览,一段文本绘制好了。

这里你可能会问:svg 里为什么不用 p 标签来显示文本呢?我们知道,svg 是在一个画布里绘制图形,text 也是绘制的对象。这样,我们就可以使用 svg 的一些专有特性控制文本了,比如旋转文本。

我们给 text 标签定义 transform 属性,值为 rotate 函数,在小括号里定义两个参数:

第一个参数是旋转角度。

第二个参数,是旋转的中心点坐标。此参数缺省默认为原点(0,0) (读作零零)。两个参数之间用空格分开。

回到编辑器,在上个 svg 结尾处添加一个 br 标签。回车换行。

添加一个新的 svg 标签,属性 width 等于 200,height 等于 60。

在 svg 里添加 text 标签,text 里写入一些文本,定义属性 x 等于 0,y 等于 15,fill 等于 red。定义 transform 属性,值为 rotate,小括号,30 空格,20,40 rotate(30 20,40)。保存。

回到浏览器,刷新,文本旋转了。

text 元素可以包裹多个 tspan 子元素。每个 tspan 元素可以包含不同的格式和位置。

回到编辑器,在上个 svg 结尾处添加一个 br 标签。回车换行。

再添加一个新的 svg 标签,属性 width 等于 200,height 等于 90。

在 svg 里添加 text 标签,定义属性 x 等于 10,y 等于 20,fill 等于 red。text 里写入一些文本。

在文本的下方,定义一个 tspan 标签,属性 x 等于 10, y 等于 45,里面写入一些内容。

复制一个 tspan,属性 x 等于 10, y 等于 70,改写一下里面的内容。

回到浏览器,刷新,三行文本显示出来了。

你可能会问:text 绘制的文本可以添加链接吗?可以的。

给文本添加链接的方法,就是把 text 标签用 a 标签包裹起来,给 a 标签添加 xlink:href 属性,属性值就是链接的地址,也可以定义 target 属性。

这里为什么不直接用 href 属性呢?实际上 svg 是应用 xml 语法定义元素的,我们还要在 svg 标签上定义一个命名空间的属性 xmlns:xlink (读作xml n s 冒号 xlink),属性值一般写为 w3c 的这个网址 (http://www.w3.org/1999/xlink)。这里大家不必深究,直接照着写下来即可。

回到编辑器,在上个 svg 结尾处添加一个 br 标签。回车换行。

添加一个新的 svg 标签,属性 width 等于 200,height 等于 30,xmlns:xlink 等于这个网址。

在 svg 里添加 a 标签,定义 xlink:href 属性,值为一个链接地址,我们设置为本地的一个 html 文件。

在 a 标签里添加 text 标签,填入一些文本。给 text 定义属性 x 等于 0,y 等于 15,fill 等于 red。保存。

回到浏览器,刷新,点击文本链接,在新窗口里打开了本地的网页。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • SVG 可伸缩矢量图形(Scalable Vector Graphics) 使用 XML 格式定义图像 是w3c的...
    小樓me阅读 1,138评论 0 1
  • @(HTML5)[canvas与SVG] [TOC] 十一 、SVG HTML体系中,最常用的绘制矢量图的技术是S...
    踏浪free阅读 4,779评论 0 2
  • 接着上篇文章继续往后讲解其他知识点,感谢读者们愿意花费您们宝贵时间阅读! 使用滤镜filter(也是设置阴影) <...
    lilyping阅读 964评论 0 0
  • 在SVG中,使用 path 标签来定义一个路径。它是一个单标签,基本语法为:尖角号 path,斜线尖角号。应用路径...
    千锋阅读 1,376评论 0 0
  • 路径 什么是SVG路径M = moveto 起点L = lineto 其它点H = horizontal line...
    David_Rao阅读 452评论 0 1

友情链接更多精彩内容