SVG(可縮放向量圖形)是一種用來描述二維向量圖形的標記語言。您可以使用 SVG 中的文字將各種類型的文字元素新增至圖形中。以下是在 SVG 中使用文字的一些方法:

  1. <text>元素: <text>元素用於建立簡單的文字元素。您可以指定 SVG 畫布中的文字內容和位置。

    XML
    <svg width="300" height="100"> <text x="10" y="40">Hello, SVG!</text> </svg>
  2. 文字樣式:您可以對文字套用各種樣式選項,例如字體大小、字體系列、填滿顏色、描邊等。

    XML
    <svg width="300" height="100"> <text x="10" y="40" font-family="Arial" font-size="20" fill="blue">Styled Text</text> </svg>
  3. <tspan>元素: <tspan>元素可讓您將多個文字範圍分組到單一<text>元素中。這對於將不同樣式應用於文字的不同部分非常有用。

    XML
    <svg width="300" height="100"> <text x="10" y="40"> <tspan fill="red">Red</tspan> <tspan fill="green" dx="5">Green</tspan> <tspan fill="blue" dx="5">Blue</tspan> </text> </svg>
  4. 文字路徑:您可以使用<textPath>元素沿路徑放置文字。這允許您建立遵循特定形狀或曲線的文字。

    XML
    <svg width="300" height="100"> <path id="myPath" d="M10 80 Q 52.5 10, 95 80 T 180 80" /> <text> <textPath href="#myPath">Curved Text</textPath> </text> </svg>
  5. 文字旋轉:您可以使用rotate屬性旋轉文字。

    XML
    <svg width="300" height="100"> <text x="10" y="40" transform="rotate(45 10,40)">Rotated Text</text> </svg>
  6. 文字對齊方式:可以使用text-anchor屬性來指定文字的對齊方式。值可以是「開始」、「中間」或「結束」。

    XML
    <svg width="300" height="100"> <text x="10" y="40" text-anchor="start">Start</text> <text x="150" y="40" text-anchor="middle">Middle</text> <text x="290" y="40" text-anchor="end">End</text> </svg>

這些只是幾個範例,SVG 提供了一組豐富的用於處理文字的功能。您可以探索其他屬性和元素,根據您的設計需求自訂 SVG 中的文字。