svg教程：元素绘制文本属性和示例

terry 2年前 (2023-09-27) 阅读数 68 #数据结构与算法

元素用于绘制文本。

声明

以下是元素的语法声明。这里只显示了一些主要功能。

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

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

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

XML

属性

数字	属性	描述
1	`x❀x❀❀x-文本的轴坐标。`
2	`y`	文本`y`轴的坐标。
3	`dx`	沿`x`轴移动的坐标。
4	`dy`	的坐标沿着 `y` 轴移动。
5	`旋转`	旋转适用于所有字形。
6	`文本长度`	渲染文本的长度。
7	`长度调整`	调整文字和文本的渲染长度。

示例

文件：testSVG.html -

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

      <h1>简单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>

HTML♹打开❀❓和浏览器您可以使用Chrome/Firefox/Opera直接查看SVG图像，无需任何插件插入。 Internet Explorer 9 及更高版本还支持 SVG 图像渲染。

在 HTML 中使用旋转4 打开在浏览器中查看上面的示例代码文件，得到以下结果 -

超链接文本

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

      <h1>简单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>

HTML在浏览器中打开上面的示例代码文件，得到以下结果-