選單
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

SVG <text> 和 <tspan>


SVG 文字 - <text>

<text> 元素用於定義文字。

<text> 元素有七個基本屬性用於定位和旋轉文字

Attribute 描述
x 文字起始的 x 座標。預設為 0
y 文字起始的 y 座標。預設為 0
dx 文字的水平偏移位置(相對於前一個文字位置)
dy 文字的垂直偏移位置(相對於前一個文字位置)
rotate 應用於文字每個字母的旋轉(以度為單位)
textLength 文字必須適應的寬度
lengthAdjust 文字如何被壓縮或拉伸以適應 textLength 屬性定義的寬度

一個簡單的文字

使用 SVG 編寫一個簡單的文字

I love SVG! Sorry, your browser does not support inline SVG.

這是 SVG 程式碼

示例

<svg height="30" width="200" xmlns="http://www.w3.org/2000/svg">
  <text x="5" y="15" fill="red">我愛 SVG!</text>
</svg>
自己動手試一試 »

無填充的文字

僅有描邊而無填充的文字

I love SVG! Sorry, your browser does not support inline SVG.

這是 SVG 程式碼

示例

<svg height="40" width="200" xmlns="http://www.w3.org/2000/svg">
  <text x="5" y="30" fill="none" stroke="red" font-size="35">我愛 SVG!</text>
</svg>
自己動手試一試 »

帶填充和描邊的文字

帶填充和描邊的文字

I love SVG! Sorry, your browser does not support inline SVG.

這是 SVG 程式碼

示例

<svg height="40" width="200" xmlns="http://www.w3.org/2000/svg">
  <text x="5" y="30" fill="pink" stroke="blue" font-size="35">我愛 SVG!</text>
</svg>
自己動手試一試 »

旋轉文字中的每個字母

使用 rotate 屬性,以指定的度數旋轉文字中的每個字母

I love SVG! Sorry, your browser does not support inline SVG.

這是 SVG 程式碼

示例

<svg height="40" width="200">
  <text x="5" y="30" fill="red" font-size="35" rotate="30">我愛 SVG!</text>
</svg>
自己動手試一試 »


旋轉整個文字

使用 transform 屬性旋轉整個文字

I love SVG! Sorry, your browser does not support inline SVG.

這是 SVG 程式碼

示例

<svg height="100" width="200">
  <text x="5" y="30" fill="red" font-size="25" transform="rotate(30 20,40)">我愛 SVG!</text>
</svg>
自己動手試一試 »

SVG 文字 - <tspan>

<tspan> 元素用於標記文字的部分(就像 HTML 中的 <span> 元素一樣)。

<tspan> 元素必須是 <text> 元素或另一個 <tspan> 元素的子元素。

<tspan> 元素有六個基本屬性用於定位和旋轉文字

Attribute 描述
x 設定 tspan 中文字的絕對起始 x 座標
y 設定 tspan 中文字的絕對起始 y 座標
dx tspan 中文字的水平偏移位置(相對於前一個文字位置)
dy tspan 中文字的垂直偏移位置(相對於前一個文字位置)
rotate 應用於 tspan 中文字每個字母的旋轉(以度為單位)
textLength tspan 中文字必須適應的寬度

<tspan> 元素的使用

<text> 元素中使用 <tspan> 元素

I Love SVG! Sorry, your browser does not support inline SVG.

這是 SVG 程式碼

示例

<svg height="40" width="250" xmlns="http://www.w3.org/2000/svg">
  <text x="5" y="30" fill="red" font-size="35">我愛
    <tspan fill="none" stroke="green">SVG</tspan>!
  </text>
</svg>
自己動手試一試 »

×

聯絡銷售

如果您想將 W3Schools 服務用於教育機構、團隊或企業,請傳送電子郵件給我們
sales@w3schools.com

報告錯誤

如果您想報告錯誤,或想提出建議,請傳送電子郵件給我們
help@w3schools.com

W3Schools 經過最佳化,旨在方便學習和培訓。示例可能經過簡化,以提高閱讀和學習體驗。教程、參考資料和示例會不斷審查,以避免錯誤,但我們無法保證所有內容的完全正確性。使用 W3Schools 即表示您已閱讀並接受我們的使用條款Cookie 和隱私政策

版權所有 1999-2024 Refsnes Data。保留所有權利。W3Schools 由 W3.CSS 提供支援