SVG <text> 文本

SVG <text>元素用于在SVG图像中绘制文本。在svg中使用 <text>元素,可以实现绘制文字,文字旋转,多行文字,具有超级链接的文字等

要绘制文本,使用<text>元素。

      <h1>SVG Text</h1>
      <svg width="550" height="150">
         <g>
            <text x="40" y="23" >Text: </text>
            <text x="40" y="40" fill="rgb(121,0,121)">www.cainiaoplus.com 菜鸟教程 </text>
         </g> 
      </svg>
测试看看‹/›

运行后效果如下:

SVG Text

Text:www.cainiaoplus.com 菜鸟教程

用法解释

x:它定义了文本左上角的位置。

y:它定义文本的顶部位置。

width:定义宽度。

height:定义高度。

fill:fill属性用于定义填充颜色。

旋转文字

它用于创建旋转文本。

<svg height="100" width="200">
  <text x="0" y="15" fill="red" transform="rotate(30 20,40)">www.cainiaoplus.com</text>
</svg>
测试看看‹/›

运行后效果如下:

www.cainiaoplus.com

用法解释

x:定义左上角的位置。

y:它定义顶部位置。

width:定义宽度。

height:定义高度。

fill:fill属性用于定义填充颜色。

多行文字

它用于创建多行文本。使用<tspan>元素,可以将<text>元素安排在任意数量的子组中。

<svg width="570" height="100">
  <g>
  <text x="40" y="23" >Multiline Text: </text>
  <text x="40" y="40" fill="rgb(121,0,121)">www.cainiaoplus.com
   <tspan x="40" y="60" font-weight="bold"> 在线菜鸟教程. </tspan>
   </text>
  </g>
 </svg>
测试看看‹/›

运行后效果如下:

Multiline Text:www.cainiaoplus.com在线菜鸟教程.

用法解释

x:定义左上角的位置。

y:它定义顶部位置。

width:定义宽度。

height:定义高度。

fill:fill属性用于定义填充颜色。

超级链接文字

它用于创建具有超级链接的文本。

      <svg width="500" height="100">
         <g>
            <text x="20" y="10" >Text as Link: </text>
         
            <a xlink:href="/svg-tutorial" target="_blank">
               <text font-family="Verdana" font-size="30" x="40" y="40" 
               fill="rgb(121,0,121)">www.cainiaoplus.com</text>
            </a>
         </g>
      </svg>
测试看看‹/›

运行后效果如下:

Text as Link:www.cainiaoplus.com

用法解释

x:定义左上角的位置。

y:它定义顶部位置。

width:定义宽度。

height:定义高度。

fill:fill属性用于定义填充颜色。