最高效的WEB程序员学习网站
SVG手册 HTML5手册
 

SVG <tspan>


在SVG里,<tspan>标记的作用是将一段文本包裹起来,你可以对这段包裹的文字的颜色、位置、形状等特征进行单独的修饰,它跟HTML标记<span>的作用非常相似。



	

    你丫的 
    	不是 
    	一个香蕉
    

上面的文字使用了下面的SVG代码:

<svg width="250" height="100" viewBox="0 0 250 100"
     xmlns="http://www.w3.org/2000/svg" version="1.1">

  <style>

text{
    font: 20px Verdana, Helvetica, Arial, sans-serif;
}

tspan{
  fill: red;
  font-weight: bold
}

  </style>

    <text x="15" y="30">你丫的
      <tspan>不是</tspan> 
      一个香蕉
    </text>
</svg>

SVG文本引用<tref>


提示:新版的svg中已经将<tref>这个标记删除,你可以使用<use>标记替代它。

文本路径<textPath>


在SVG里,处理能沿直线方向写文字外,还能够使用<path>先定义一条路径,让文字沿着定义好的路径排列。textPath标记的作用就是放在<text>标记内部引用预定义的<path>,引用时,我们需要使用xlink:href属性指明需要引用的路径的ID。


  
    
  

  

  
    
      我先往上去,然后往下去,然后再往上去,漂亮吧!
    
  

  
  

上面的图形使用了下面的SVG代码:

<svg width="100%" height="100%" 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">
      我先往上去,然后往下去,然后再往上去,漂亮吧!
    </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>

SVG文本<text>


<text>用来定义文字文本。


例 1

写一段文字:


  SVG是个好东西!
  Sorry, your browser does not support inline SVG.

上面的图形使用了下面的SVG代码:

<svg height="30" width="200">
 
<text x="0" y="15" fill="red">SVG是个好东西!</text>
</svg>



 

例 2

旋转文字角度:


  SVG是个好东西!
  Sorry, your browser does not support inline SVG.

上面的图形使用了下面的SVG代码:

<svg height="60" width="200">
 
<text x="0" y="15" fill="red" 
transform="rotate(30 20,40)">SVG是个好东西!</text>
</svg>

例 3

在<text>元素里,我们可以使用<tspan>元素给文字分组,每个<tspan>元素可以定义自己的格式/样式/位置。

多行文本(使用 <tspan> 元素):


  这里有几行文字:
    这是第一行文字。 
    第二行文字在这里。 
  
  Sorry, your browser does not support inline SVG.

上面的图形使用了下面的SVG代码:

<svg height="90" width="200">
  <text x="10" y="20" style="fill:red;">这里有几行文字:
    <tspan x="10" y="45">这是第一行文字。</tspan>
    <tspan x="10" y="70">第二行文字在这里。</tspan>
  </text>
</svg>

例 4

我们还可以给文本添加超链接,这需要使用 <a> 标记:


  
    SVG是个好东西!
  
  Sorry, your browser does not support inline SVG.  

上面的图形使用了下面的SVG代码:

<svg height="30" width="200"
xmlns:xlink="http://www.w3.org/1999/xlink">
  <a xlink:href="https://know.webhek.com/svg/" 
target="_blank">
    <text x="0" y="15" fill="red">SVG是个好东西!</text>
  </a>
</svg>