首页 / HTML / SVG基础|绘制SVG文字

SVG基础|绘制SVG文字

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了SVG基础|绘制SVG文字，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含6311字，纯文字阅读大概需要10分钟。

内容图文

我们可以使用SVG 的<text>元素来在SVG图像上绘制文字。下面是一个简单的例子：

<svg xmlns="http://www.w3.org/2000/svg">
  <text x="20" y="40">这里是SVG文字</text>
</svg>

这个例子中定义一个位于x=20，y=40位置的文本。文字显示为“这里是SVG文字”。下面是它的返回结果：

这里是SVG文字

文字的定义

在深入了解SVG文字之前，先来看看下面的三个定义：

Glyphs：Glyphs是字母或符号的视觉表现。例如，因为字母“a”有多种不同的视觉表现方式，所以可以使用不同的Glyphs来绘制它。
Fonts：Fonts代表字体，它是glyphs的集合，可以用于表现一组字母或符号。
Characters：Characters是代表一个字母或符号的二进制数字。一个character可以使用1个或多个字节来表示。一个characters在被计算机渲染的时候，会将它映射为字体中的一个符号。

文字的位置

SVG文字的位置有<svg>元素的x和y属性来决定。x属性决定文字的左边部位置（文字的开始位置），y属性决定文字的下边部位置（注意这里不是上边部）。文字的y属性定位不同于其它SVG元素，如直线，矩形和其它图形。下面的例子显示了一串文字和一条直线，它们的y属性都是40：

观察直线位于文字的位置

注意观察，文字的y属性位于文字的下边，而不是上边。

Text Anchor

文字的anchor决定哪个部分的文字放置在text元素中的x属性定义的位置。默认的anchor是文字左边部，即文字的开始处。你也可以将anchor设置为middle，使它位于文字的中间，设置为end，使它位于文字的右边。

要设置文字的anchor，可以使用CSS的text-anchor属性。该属性的取值为：start、middle和end。下面的例子展示了设置不同的text-anchor值时文字的位置。

SVG基础|绘制SVG文字 - 文章图片

垂直的直线是三串文本的x位置。它们都位于x="50"的位置上。你可以观察不同的取值时文字的不同定位方式。

上效果的代码如下：

<text x="50" y="20"
      style="text-anchor: start">
    Start
</text>
<text x="50" y="40"
      style="text-anchor: middle">
    Middle
</text>
<text x="50" y="60"
      style="text-anchor: end">
    End
</text>

文字的描边和填充

和其它SVG图形一样，SVG文字也可以进行描边和填充操作。如果你只指定了文字的描边属性，文字将会渲染为一个文字轮廓。如果你只指定了文字的填充属性，那么文字看起来和平常是一样的。来看看下面的三种文字描边和填充的效果：

SVG基础|绘制SVG文字 - 文章图片

你也可以使用stroke-width属性为文字的描边设置宽度。下面的例子将文字的描边宽度设置为2：

SVG基础|绘制SVG文字 - 文章图片

SVG文字的间距和字距调整

我们可以使用letter-spacing和kerning属性来控制文字的间距和字距调整（两个glyphs之间的距离）。下面是一个简单的例子：

<svg xmlns="http://www.w3.org/2000/svg">
  <text x="20"  y="20" >Example SVG text</text>
  <text x="20"  y="40" style="kerning:2;">Example SVG text</text>
  <text x="20"  y="60" style="letter-spacing:2;">Example SVG text</text>
</svg>

下面是上面代码的返回结果：

Example SVG text
Example SVG text
Example SVG text

上面的letter-spacing和kerning使用的是正数值，如果你使用负数值，那么字距将会收缩。

单词间距

你可以使用word-spacing CSS属性来指定单词的间距。单词的间距是指单词之间的空白符的数量。看下面的例子：

<svg xmlns="http://www.w3.org/2000/svg">
  <text x="20" y="20">
    Word spacing is normal
  </text>
  <text x="20" y="40"
        style="word-spacing: 4;">
      Word spacing is 4
  </text>
  <text x="20" y="60"
        style="word-spacing: 8;">
      Word spacing is 8
  </text>
</svg>

下面是返回的结果。注意：Firefox浏览器有可能不支持这个word-spacing属性。

Word spacing is normal
Word spacing is 4
Word spacing is 8

word-spacing的值也可以设置为负数，这时单词的间距将会被压缩。

文字布局-SVG文字没有自动换行功能

SVG文字是没有自动换行功能的。你必须自己定位每一行文本。需要制作多行文本的话，<tspan>元素可能会有所帮助，我们将在后面的文章中讲解这个元素。

你还可以将文字放置在一条路径上，例如一个圆或一条曲线上。达到这种效果你需要使用<textpath>元素。

旋转文本

你可以像旋转其它SVG图形一样旋转SVG文字。旋转SVG文字需要使用SVG transform属性。

<svg xmlns="http://www.w3.org/2000/svg">  
  <text x="20"  y="40"
          transform="rotate(30 20,40)"
          style="stroke:none; fill:#000000;"
          >Rotated SVG text</text>
</svg>

上面代码的返回结果是：

SVG基础|绘制SVG文字 - 文章图片

关于SVG的transform属性，后面会有文字详细讲解。

垂直文字

你可以使用旋转的方法来制作垂直的SVG文字，但是还有一种简单的方法来显示垂直文字。那就是使用writing-mode属性，将它的值设置为tb（Top to Bottom）。Firefox22以下的版本不支持这个属性。看下面的例子：

<svg xmlns="http://www.w3.org/2000/svg">  
  <text x="10" y="20" style="writing-mode: tb;">
    垂直文字
  </text>
</svg>

上面的代码的返回结果是：

垂
直
文
字

我们在来看看英文的情况：

<svg xmlns="http://www.w3.org/2000/svg">  
  <text x="10" y="20" style="writing-mode: tb;">
    Vertical
  </text>
</svg>

SVG基础|绘制SVG文字 - 文章图片

你会发现如果是英文的话，字母也被旋转了90度。如果你需要每个字母都不被旋转，可以设置glyph-orientation-vertical CSS属性值为0。这个属性值用于旋转glyphs。默认值它的值为90度。看下面的例子：

<text x="10" y="10" style="writing-mode: tb; glyph-orientation-vertical: 0;">
    Vertical
</text>
<text x="110" y="10" style="writing-mode: tb; glyph-orientation-vertical: 90;">
    Vertical
</text>

上面的代码的返回结果是：

SVG基础|绘制SVG文字 - 文章图片

文字的方向

你可以使用direction CSSS属性来设置文字的渲染方向。direction属性有两个取值：ltr和rtl。分别是“从左向右”和“从右向左”的意思。另外，在渲染英文的时候，如果需要字母也从右向左渲染，需要设置unicode-bidi: bidi-override;。看下面的例子：

<text x="130" y="40" style="direction: rtl;">从右向左显示</text>
<text x="130" y="80" style="direction: rtl; unicode-bidi: bidi-override;">right to Left</text>

right to Left

SVG文字样式

下面列出了一组可以使用在SVG文字上的CSS属性。你还可以为文字的描边和填充设置渐变，填充模式和遮罩等效果。

注意，下面的CSS属性名称必须是小写，否则渲染时会被忽略！

属性	描述
font-family	设置字体
font-size	设置文字大小
kerning	设置字距调整的值
letter-spacing	字母之间的间距
word-spacing	单词之间的间距
text-decoration	是否带下划线。可选值有：none、underline、overline和line-through
stroke	文字的描边颜色。默认文字只有填充色，没有描边，添加描边将使文字变粗
stroke-width	文字描边的宽度
fill	文字的填充色

下面是一个使用了上面的一些属性的例子：

<svg xmlns="http://www.w3.org/2000/svg">
    <text x="20"  y="40"
          style="font-family: Arial;
                 font-size  : 34;
                 stroke     : #000000;
                 fill       : #00ff00;
                "
          >Styled SVG text</text>
</svg>

上面的代码的返回结果是：

SVG基础|绘制SVG文字 - 文章图片

文字的长度

你可以使用textLength属性来设置文字的长度。文字的长度可以用来调整字符（characters）之间的距离来适应指定的长度。同时也会调整符号（glyphs）的宽度。使用lengthAdjust属性你可以指定是否同时调整字符间距和符号的宽度。看下面的例子：

<text x="5" y="20" textLength="140" lengthAdjust="spacing">
  A long, long, long text.
</text>
<text x="5" y="40" textLength="200" lengthAdjust="spacing">
    A long, long, long text.
</text>
<text x="5" y="60" textLength="200" lengthAdjust="spacingAndGlyphs">
    A long, long, long text.
</text>

上面的代码的返回结果如下。注意最后两串文字的间距和字符大小：

A long, long, long text.
A long, long, long text.
A long, long, long text.

以上就是SVG基础|绘制SVG文字的内容，更多相关内容请关注PHP中文网（www.gxlcms.com）！

内容总结

以上是互联网集市为您收集整理的SVG基础|绘制SVG文字全部内容，希望文章能够帮你解决SVG基础|绘制SVG文字所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/389876.html

来源：【匿名】

【上一篇】SVG基础|SVGTEXTPATH元素【下一篇】PHP 和 HTML

更多 ►

【SVG基础|绘制SVG文字】教程文章相关的互联网学习教程文章

AJAX基础（三）——DOM基础及DOM操纵HTML【代码】

DOM的概念 DOM= Document Object Model，文档对象模型，DOM可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构。换句话说，这是表示和处理一个HTML或XML文档的常用方法。有一点 DOM很重要，DOM的设计是以对象管理组织（OMG）的规约为基础的，因此可以用于任何编程语言。最初人们把它认为是一种让JavaScript在浏览器间可移植的方法，不过DOM的应用已经远远超出这个范围。Dom技术使得用户页面可以动态地变化，如可...

HTML5基础

1.HTML是什么?HTML是用来描述网页的一种语言,它是一种超文本标记语言,也就是说,HTML不是一种编程语言,仅是一种标记语言.2.HTML特点简易性：超级文本标记语言版本升级采用超级方式，从而更加灵活方便。可拓展性：超级文本标记语言的广泛应用带来了加强功能，增加标识符等要求，超级文本标记语言采取子类元素的方式，为系统扩展带来保证。平台无关性：虽然PC大行其道，但使用MAC等其他机器的大有人在，超级文本标记语言可以使用在广泛...

HTML零基础入门视频课程——笔记【代码】

视频课程链接：http://edu.51cto.com/course/16023.htmlHTML，主讲：汤小洋一、HTML简介1. HTML是什么? HTML：Hyper Text Markup Language超文本标签(标记)语言? 由各种标签组成，用来制作网页，告诉浏览器该如何显示页面2. 作用制作网页，控制网页和内容的显示插入图片、音乐、视频、动画等多媒体通过链接检索信息使用表单获取用户信息，实现交互3. 版本? W3C：World Wide Web Consortium [k?n?s?:ti?m]万维网联盟，制定Web...

HTML语言基础应用【图】

Html文档可以包含的内容：文本：HTML对文本的支持是最丰富的，你可以设置不同级别的标题，分段和换行，可以指定文本的语义和外观，可以说明文本是引用自其它的地方，等等等等。链接链接用来指出内容与另一个页面或当前页面某个地方有关。图片图片用于使页面更加美观，或提供更多的信息。列表列表用于说明一系列条目是彼此相关的。表格表格是按行与列将数据组织在一起的形式。也有不少人使用表格进行页面布局。表单表单通常由文本输...

HTML基础做出属于自己的完美网页【代码】【图】

HTML HTML解释：HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写，他是一种制作万维网页面标准语言（标记）。相当于定义统一的规则（W3C），大家都来遵守他，这样就可以让浏览器根据标记语言的规则去解释它。浏览器负责将标签翻译成用户“看得懂”的格式，呈现给用户！网页的组成：一个网页一般由两部分组成即：HTML（Hypertext Markup Language）和CSS（Cascade Style Sheets）HTML负责描述网页的结构和内容（如标题...

HTML基础 pre 显示预排版的代码【代码】【图】

OS : Windows 10browser : Chrome 83.0.4103.116editor : Visual Studio Code 1.46.1 typesetting : Markdown html<!DOCTYPE html> <html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title> </head><body><pre><html></html></pre> </body></html> resultresource[ 教程 ] www.w3school.com.cn/html/index.asp[ 手册 ] www.w3cscho...

html基础【代码】

HTML通过各种标签进行定义，最简单的HTML文档：<html> <head><title>简单的HTML</title> </head> <body><p>title 元素的内容会显示在浏览器的标题栏中。</p><p>body 元素的内容会显示在网页中。</p> </body> </html>　　基本HTML页面以<html>标签开始，以</html>结束。在它们之间，整个页面有两部分－－头部和正文。　　头部－－夹在<head>和</head>标签之间－－<head>定义文档的头部，是所有头部元素的容器。可以引用脚本、指示浏...

XHTML基础

XHTML文档由元素组成，元素定义了文本和图形在浏览器中显示的方式，告诉web浏览器如何显示页面。XHTML 元素使用XHTML标记定义，每个标记都出现在一对尖括号中，标记通常成对出现，第一个标记定义了标记的起点，称为开始标记第二个标记定义了标记的结尾称为结束标记。在开始标记和结束标记之间的为别把称为元素内容。标记具有属性，属性提供了关于页面上的XHTML元素的附加信息。XHTML文档的总体结构由<html>/<head><body>这三个文档...

通达OA 小飞鱼工作流在线培训教程（一）HTML基础介绍【图】

应一些刚接触工作流设计朋友的要求，这里开设一个系列教程，对通达OA工作流设计相关的内容做个介绍。方便解决一些日常经常出现的问题，希望对刚刚接触这部分工作的朋友能够有些帮助。工作流设计须要多方面的知识，当中的HTML是最基础的部分，这里先通过大概4小节的课程将HTML部分介绍一下。对于刚接触网页html语言的朋友能够实际操练一下。寻经常常使用的编辑工具能够使用Dreamweaver。记事本或者Editplus、UltraEdit，对于刚開始学...

HTML&CSS基础学习笔记1.6-html的文本操作标签【图】

文本也许是HTML里最常见的元素了，所以我们有必要对HTML的文本操作标签做下认识。1. <em>，<i>内的文字呈现为倾斜效果；2. <strong>，<b>内的文字呈现为加粗效果；3. <b>，<i>只是单纯的为了让文本具有某种特殊样式，而<strong>，<em>不仅带有特殊样式，而且也表达了某种语义；4. 在单纯的为了达到某种样式的情况下，建议使用不带有语义的标签。体验如下：http://www.mayacoder.com/lesson/lesson?lesson_id=28&knowledge_id=5原文...

Reboot运维开发html基础-06

零基础HTML5游戏制作教程第6章贪吃蛇的实现及代码【代码】【图】

第6章贪吃蛇的实现及代码讲了不少东西了，老讲理论的东西没劲呀，我们不如先试着做一个小游戏吧。作为我们的第一个游戏，当然是越简单越好。《贪吃蛇》大家应该都玩过吧？我觉得我玩过的游戏中，她应该算是最简单的一个了。好，就让我们从做《贪吃蛇》开始，享受自己做游戏的乐趣吧。由于这个游戏是本教程的第一个实际的游戏例子，我会讲的比较详细一些。请大家重点注意编程的思路和实现的方法，这些远比代码本身要重要。一，蛇身...

HTML基础 select selected 下拉列表的默认值【代码】【图】

OS : Windows 10browser : Chrome 83.0.4103.116editor : Visual Studio Code 1.46.1 typesetting : Markdown html<!DOCTYPE html> <html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title> </head><body><form><select name="道家经典"><option value="道德经">道德经</option><option value="清静经" selecte...

web基础，用html元素制作web页面【代码】【图】

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Mis问答平台</title></head><body><h1>mis问答系统</h1><h2>2015</h2><div id="container" style="width: 300px"><div id="header" style="background-color: darkorange"><h2 align="center">登陆界面</h2></div><div id="content"><form> 用户名：<input type="text" placeholder="请输入账号"><br>密码&nbsp：<input type="password" placeholder="请输入密...

html基础

HTML 简介 HTML 是用来描述网页的一种语言。HTML 指的是超文本标记语言 (Hyper Text Markup Language)HTML 不是一种编程语言，而是一种标记语言 (markup language)标记语言是一套标记标签 (markup tag)HTML 使用标记标签来描述网页HTML 标签HTML 标记标签通常被称为 HTML 标签 (HTML tag)。HTML 标签是由尖括号包围的关键词，比如 <html>HTML 标签通常是成对出现的，比如 <b> 和 </b>标签对中的第一个标签是开始标签，第二个标签是...

首页 / HTML / SVG基础|绘制SVG文字

SVG基础|绘制SVG文字

内容导读

内容图文

内容总结

内容备注

内容手机端

【SVG基础|绘制SVG文字】教程文章相关的互联网学习教程文章

SVG - 相关标签

HTML - 技术教程分类

HTML - 最新教程

HTML - 最热教程