<text
  x="x-cordinates"
  y="y-cordinates"

  dx="list of lengths"
  dy="list of lengths"

  rotate="list of numbers"
  textlength="length"
  lengthAdjust="spacing" >
</text>

屬性

編號(hào)	屬性	描述
1	`x`	文本的`x`軸的坐標(biāo)。
2	`y`	文本的`y`軸的坐標(biāo)。
3	`dx`	隨著`x`軸移動(dòng)的坐標(biāo)。
4	`dy`	隨著`y`軸移動(dòng)的坐標(biāo)。
5	`rotate`	旋轉(zhuǎn)應(yīng)用于所有字形。
6	`textlength`	渲染文本的長(zhǎng)度。
7	`lengthAdjust`	調(diào)整類型與文本的渲染長(zhǎng)度。

示例

文件:testSVG.html -

<html>
   <title>SVG文本</title>
   <body>

      <h1>簡(jiǎn)單SVG文本圖片</h1>

       <svg width="800" height="800">
         <g>
            <text x="30" y="12" >Text: </text>
            <text x="30" y="30" fill="rgb(121,0,121)">WWW.YIIBAI.COM</text>
         </g> 
       </svg>
   </body>
</html>

在Chrome網(wǎng)絡(luò)瀏覽器中打開testSVG.html ，可以使用Chrome/Firefox/Opera直接查看SVG圖像，無(wú)需任何插件。 Internet Explorer 9及更高版本還支持SVG圖像呈現(xiàn)。

使用旋轉(zhuǎn)

<html>
   <title>SVG文本</title>
   <body>

      <h1>簡(jiǎn)單SVG文本圖片</h1>

       <svg width="800" height="800">
         <g>
            <text x="30" y="12" >Multiline Text: </text>
            <text x="30" y="30" rotate="15" transform="rotate(30 20,40)" fill="rgb(121,0,121)">WWW.YiiBai.COM
            <tspan x="30" y="50" font-weight="bold">Simply Easy learning.</tspan>
            <tspan x="30" y="70">We teach just for free.</tspan>
            </text>
         </g>
      </svg>

   </body>
</html>

在瀏覽器打開上面示例代碼文件，得到以下結(jié)果 -

超鏈接文本

<html>
   <title>SVG文本</title>
   <body>

      <h1>簡(jiǎn)單SVG文本圖片</h1>

       <svg width="800" height="800">
         <g>
            <text x="30" y="10" >Text as Link: </text>

            <a xlink:href="http://www.yiibai.com/svg/" target="_blank">
               <text font-family="Verdana" font-size="20"  x="30" y="30" 
               fill="rgb(121,0,121)">WWW.Yiibai.COM</text>
            </a>
         </g>
      </svg>

   </body>
</html>

在瀏覽器打開上面示例代碼文件，得到以下結(jié)果 -

上一篇：SVG對(duì)話框效果下一篇：SVG漸變

在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

SVG文本

聲明

示例