SVG文字介绍和用法详解

本文概述

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

例子

<!DOCTYPE html>
<html>
   <title>SVG Text</title>
   <body>
      
      <h1>SVG Text</h1>
      
      <svg width="950" height="950">
         <g>
            <text x="40" y="23" >Text: </text>
            <text x="40" y="40" fill="rgb(121, 0, 121)">WWW.srcmini.COM</text>
         </g> 
      </svg>
   
   </body>
</html>

立即测试

解释

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

y:定义文本的最高位置。

width:定义宽度。

height:定义高度。

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

旋转文字

它用于创建旋转文本。

例子

<!DOCTYPE html>
<html>
<body>

<svg height="60" width="200">
  <text x="0" y="15" fill="red" transform="rotate(30 20, 40)">I love SVG</text>
</svg>
 
</body>
</html>

立即测试

解释

×:定义左上角的位置。

y:定义最高位置。

width:定义宽度。

height:定义高度。

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

多行文字

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

例子

<!DOCTYPE html>
<html>
   <title>SVG Text</title>
   <body>
   
      <h1>SVG Text</h1>
      
      <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.srcmini.COM
               <tspan x="40" y="60" font-weight="bold"> This is Simple Easy learning. </tspan>
            </text>
         </g>
      </svg>
      
   </body>
</html>

立即测试

解释

×:定义左上角的位置。

y:定义最高位置。

width:定义宽度。

height:定义高度。

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

超级链接文字

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

例子

<!DOCTYPE html>
<html>
   <title>SVG Text</title>
   <body>
   
      <h1>Sample SVG Text</h1>
      
      <svg width="800" height="800">
         <g>
            <text x="20" y="10" >Text as Link: </text>
         
            <a xlink:href="https://www.srcmini02.com/svg-tutorial" target="_blank">
               <text font-family="Verdana" font-size="30" x="40" y="40" 
               fill="rgb(121, 0, 121)">WWW.srcmini.COM</text>
            </a>
         </g>
      </svg>
      
   </body>
</html>

立即测试

解释

×:定义左上角的位置。

y:定义最高位置。

width:定义宽度。

height:定义高度。

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

微信公众号
手机浏览(小程序)
0
分享到:
没有账号? 忘记密码?