zoukankan      html  css  js  c++  java
  • SVG:textPath深入理解

    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>

    效果如下所示:

    使用很简单,在<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>

    效果变成了下面这样:

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

    这要如何理解呢?

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

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

    1、坐标系的x轴为path;

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

  • 相关阅读:
    1.Oracle12cR1的集群件及其组件
    28.oracle监听开启trace file
    connection strings for sql server 2005
    MDAC(Introduce to Microsoft Data Access Components)
    动态链接导入库与静态链接库
    vue3.0小印象
    vue3.0中的vite如何引入markdown文件为页面
    算法
    适配器模式(转载)
    WEB即时通讯之 XMPP OPENFIRE strophe JAXL
  • 原文地址:https://www.cnblogs.com/anrainie/p/6003197.html
Copyright © 2011-2022 走看看