文字

在談論 SVG 中的文字時，我們必須區分兩個幾乎完全獨立的主題。一個是影像中文字的包含和顯示，另一個是 SVG 字型。後者將在本教程的後面部分進行描述，而本頁將重點介紹第一部分：將文字引入 SVG 影像。

基礎知識

我們在示例介紹中看到，可以使用text元素將任意文字放入 SVG 文件中。

xml

<text x="10" y="10">Hello World!</text>

x和y屬性決定文字在視口中的顯示位置。屬性text-anchor可以取值"start"、"middle"、"end"或"inherit"，決定文字從此點向哪個方向流動。屬性dominant-baseline決定垂直對齊方式。

與形狀元素一樣，文字可以使用fill屬性著色，並使用stroke屬性賦予描邊。兩者也可以引用漸變或圖案，這使得 SVG 中簡單的文字著色功能與 CSS 2.1 相比非常強大。

<svg width="350" height="60" xmlns="http://www.w3.org/2000/svg">
  <text>
    This is
    <tspan font-weight="bold" fill="red">bold and red</tspan>
  </text>

  <style>
    <![CDATA[
      text{
        dominant-baseline: hanging;
        font: 28px Verdana, Helvetica, Arial, sans-serif;
      }
    ]]>
  </style>
</svg>

tspan元素具有以下自定義屬性

x

為包含文字設定新的絕對x座標。這會覆蓋預設的當前文字位置。該屬性還可以包含一個數字列表，這些數字逐一應用於tspan元素的單個字元。

dx

從預設當前位置開始，使用水平偏移量dx繪製文字。在這裡，您也可以提供一個值列表，這些值應用於連續的字元，因此隨著時間的推移累積偏移量。

同樣，還有y和dy用於垂直位移。

rotate

將所有字元旋轉此度數。數字列表使每個字元旋轉到其相應的值，其餘字元根據最後一個值旋轉。

textLength

給出字串的計算長度。這是一個比較模糊的屬性，它旨在允許渲染引擎在它自己的測量文字長度不符合此處提供的長度時微調字形的放置。

textPath

此元素透過其href屬性獲取任意路徑，並沿此路徑對齊其環繞的字元。

html

<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
  <path id="my_path" d="M 20,20 C 80,60 100,40 120,20" fill="transparent" />
  <text>
    <textPath xmlns:xlink="http://www.w3.org/1999/xlink" href="#my_path">
      A curve.
    </textPath>
  </text>

  <style>
    <![CDATA[
      text{
        dominant-baseline: hanging;
        font: 28px Verdana, Helvetica, Arial, sans-serif;
      }
    ]]>
  </style>
</svg>

文字

基礎知識

設定字型屬性

其他與文字相關的元素

tspan

textPath