SVG文字


<text>元素用於繪製文字。

宣告

以下是<text>元素的語法宣告。 這裡只顯示了一些主要屬性。

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

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

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

屬性

編號 屬性 描述
1 x 文字的x軸的坐標。
2 y 文字的y軸的坐標。
3 dx 隨著x軸移動的坐標。
4 dy 隨著y軸移動的坐標。
5 rotate 旋轉應用於所有字形。
6 textlength 渲染文字的長度。
7 lengthAdjust 調整型別與文字的渲染長度。

範例

檔案: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.TW511.COM</text>
         </g> 
       </svg>
   </body>
</html>

在Chrome網路瀏覽器中開啟testSVG.html ,可以使用Chrome/Firefox/Opera直接檢視SVG影象,無需任何外掛。 Internet Explorer 9及更高版本還支援SVG影象呈現。

使用旋轉

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

      <h1>簡單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>

在瀏覽器開啟上面範例程式碼檔案,得到以下結果 -

超連結文字

<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="https://www.tw511.com/svg/" target="_blank">
               <text font-family="Verdana" font-size="20"  x="30" y="30" 
               fill="rgb(121,0,121)">WWW.Tw511.COM</text>
            </a>
         </g>
      </svg>

   </body>
</html>

在瀏覽器開啟上面範例程式碼檔案,得到以下結果 -