SVG(可縮放向量圖形)是一種用來描述二維向量圖形的標記語言。您可以使用 SVG 中的文字將各種類型的文字元素新增至圖形中。以下是在 SVG 中使用文字的一些方法:
<text>
元素: <text>
元素用於建立簡單的文字元素。您可以指定 SVG 畫布中的文字內容和位置。
XML <svg width="300" height="100">
<text x="10" y="40">Hello, SVG!</text>
</svg>
文字樣式:您可以對文字套用各種樣式選項,例如字體大小、字體系列、填滿顏色、描邊等。
XML <svg width="300" height="100">
<text x="10" y="40" font-family="Arial" font-size="20" fill="blue">Styled Text</text>
</svg>
<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>
文字路徑:您可以使用<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>
文字旋轉:您可以使用rotate
屬性旋轉文字。
XML <svg width="300" height="100">
<text x="10" y="40" transform="rotate(45 10,40)">Rotated Text</text>
</svg>
文字對齊方式:可以使用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 中的文字。