SVG的文本可以沿着一条自定义的Path来排布,比如曲线、圆形等等,使用方式如下所示(来源MDN):

<svg viewBox="0 0 1000 300"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<path id="MyPath"
d="M 100 200
C 200 100 300 0 400 100
C 500 200 600 300 700 200
C 800 100 900 100 900 100" />
</defs> <use xlink:href="#MyPath" fill="none" stroke="red" /> <text font-family="Verdana" font-size="42.5">
<textPath xlink:href="#MyPath">
We go up, then we go down, then up again
</textPath>
</text>
  <!-- Show outline of the viewport using 'rect' element -->
<rect x="1" y="1" width="998" height="298"
fill="none" stroke="black" stroke-width="2" />
</svg>

效果如下所示:

aaarticlea/png;base64,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" alt="" />

使用很简单,在<defs>下定义一个path,在<text>元素下添加一个textPath引用,即可达到效果。

我们来对代码做一点儿修改,给text元素添加x和y:

 <text x=100 y=100  font-family="Verdana" font-size="42.5">
<textPath xlink:href="#MyPath">
We go up, then we go down, then up again
</textPath>
</text>

效果变成了下面这样:

aaarticlea/png;base64,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" alt="" />

可以注意到,text并没有进行简单的平移操作(相对于原位置向x方向移动100px,y方向移动100px)。

这要如何理解呢?

原因很简单,text的坐标系被修改了,没有加入textPath之前,text处于一个直角坐标系下,x轴和y轴是两条相互垂直的直线。

加入textPath之后,text的坐标系有如下性质:

1、坐标系的x轴为path;

2、坐标系的y轴在x轴的任意点上,方向都不一致,但是必然是该点对于x轴切线的垂直线

SVG:textPath深入理解的更多相关文章

  1. 有关svg的一些理解

    SVG 是使用XML来描述二维图形和绘图程序的语言. SVG指可伸缩的矢量图形(Scalable Vector Graphics) SVG使用XML格式定义图形 SVG图形在放大或改变尺寸的情况下,图 ...

  2. 理解SVG坐标系和变换:视窗,viewBox和preserveAspectRatio

    SVG元素不像HTML元素一样由CSS盒模型管理.这使得我们可以更加灵活定位和变换这些元素-也许一眼看上去不太直观.然而,一旦你理解了SVG坐标系和变换,操纵SVG会非常简单并且很有意义.本篇文章中我 ...

  3. 深入浅出 SVG

    前言 据悉,8月18号将在广州举办中国第一届React开发者大会.今日早读文章由@Starrier翻译分享. 正文从这开始- SVG 是优秀且令人难以置信的强大图像格式.本教程通过简单地解释所有需要了 ...

  4. SVG文本

    前面的话 本文将详细介绍SVG文本相关内容 位置属性 在一个SVG文档中,使用<text>元素来设置文本,<text>元素有x.y.dx.dy这四个位置属性 [x和y] 属性x ...

  5. SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组

    目录 SVG 学习<一>基础图形及线段 SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 SVG 学习<三>渐变 SVG 学习<四 ...

  6. SVG.js 文本绘制整理

    1.SVG.Text var draw = SVG('svg1').size(300, 300); //画文字内容展示 //var text = draw.text('中文内容测试\n换行处理'); ...

  7. svg描边路径动画

    svg描边路径动画<pre><!DOCTYPE html><html> <head> <meta charset="UTF-8" ...

  8. SVG开发包, 20 个有用的 SVG 工具,提供更好的图像处理

    20 个有用的 SVG 工具,提供更好的图像处理 SVG 现正在 Web 设计领域变得越发流行, 你可以使用 Illustrator 或者 Inkscape 来创建 SVG 图像. 但当进行 Web ...

  9. svg高级应用及动画

    canvas 和 webGL 这两项图形技术结合 css3 可以说能完成绝大部分的动画和需求.但 canvas 和 webGL 毕竟是偏向底层的绘制引擎,某些场景使用起来还是过于繁琐的,不分场合一律使 ...

随机推荐

  1. ajax异步请求

    做前端开发的朋友对于ajax异步更新一定印象深刻,作为刚入坑的小白,今天就和大家一起聊聊关于ajax异步请求的那点事.既然是ajax就少不了jQuery的知识,推荐大家访问www.w3school.c ...

  2. 微信小程序体验(2):驴妈妈景区门票即买即游

    驴妈妈因为出色的运营能力,被腾讯选为首批小程序内测单位.驴妈妈的技术开发团队在很短的时间内完成了开发任务,并积极参与到张小龙团队的内测问题反馈.驴妈妈认为,移动互联网时代,微信是巨大的流量入口,也是旅 ...

  3. WPF 有用博客地址

    增加智能感知的RichTextBox扩展控件(WPF) WPF自定义控件与样式(3)-TextBox & RichTextBox & PasswordBox样式.水印.Label标签. ...

  4. 谈谈一些有趣的CSS题目(二)-- 从条纹边框的实现谈盒子模型

    开本系列,讨论一些有趣的 CSS 题目,抛开实用性而言,一些题目为了拓宽一下解决问题的思路,此外,涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉 ...

  5. Android 7.1 - App Shortcuts

    Android 7.1 - App Shortcuts 版权声明:本文为博主原创文章,未经博主允许不得转载. 微博:厉圣杰 源码:AndroidDemo/Shortcuts 文中如有纰漏,欢迎大家留言 ...

  6. 用MongoDB分析合肥餐饮业

    看了<从数据角度解析福州美食>后难免心痒,动了要分析合肥餐饮业的念头,因此特地写了Node.js爬虫爬取了合肥的大众点评数据.分析数据库我并没有采用MySQL而是用的MongoDB,是因为 ...

  7. [原创]关于Hibernate中的级联操作以及懒加载

    Hibernate: 级联操作 一.简单的介绍 cascade和inverse (Employee – Department) Casade用来说明当对主对象进行某种操作时是否对其关联的从对象也作类似 ...

  8. git

    CMD命令:git initgit add . [添加文件至暂存区]git commit -m '描述性语句 随意写即可'git branch gh-pages [创建仓库分支]git checkou ...

  9. 远程连接mysql 1130错误解决方法

  10. 安装并使用PHPunit

    安装并使用PHPunit Linux 下安装PHPunit PHP 档案包 (PHAR)  要获取 PHPUnit,最简单的方法是下载 PHPUnit 的 PHP 档案包 (PHAR),它将 PHPU ...