<textPath>

要沿 <path> 形狀渲染文字,請將文字包含在具有 href 屬性的 <textPath> 元素中,該屬性引用 <path> 元素。

示例

html
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <!-- to hide the path, it is usually wrapped in a <defs> element -->
  <!-- <defs> -->
  <path
    id="MyPath"
    fill="none"
    stroke="red"
    d="M10,90 Q90,90 90,45 Q90,10 50,10 Q10,10 10,40 Q10,70 45,70 Q70,70 75,50" />
  <!-- </defs> -->

  <text>
    <textPath href="#MyPath">Quick brown fox jumps over the lazy dog.</textPath>
  </text>
</svg>

屬性

href

要渲染文字的路徑或基本形狀的 URL。如果設定了 path 屬性,則 href 無效。值型別<URL> ; 預設值:無;可動畫

lengthAdjust

應將長度調整應用於文字的位置:字形之間的空間,或兩者(空間和字形本身)。值型別spacing|spacingAndGlyphs; 預設值spacing; 可動畫

方法

沿路徑渲染單個字形的方法。值型別align|stretch ; 預設值align; 可動畫

path 實驗性

應渲染文字的路徑。值型別<path_data> ; 預設值:無;可動畫

side 實驗性

應渲染文字的路徑的哪一側。值型別left|right ; 預設值left; 可動畫

spacing

如何處理字形之間的空間。值型別auto|exact ; 預設值exact; 可動畫

startOffset

文字的開頭相對於路徑開頭的偏移量。值型別<length>|<percentage>|<number> ; 預設值0; 可動畫

textLength

將渲染文字的空間的寬度。值型別<length>|<percentage>|<number> ; 預設值auto; 可動畫

使用上下文

類別文字內容元素,文字內容子元素
允許的內容字元資料和以下任意數量的元素(按任何順序)
描述性元素
<a>, <animate>, <set>, <tref>, <tspan>

規範

規範
可縮放向量圖形 (SVG) 2
# TextPathElement

瀏覽器相容性

BCD 表格僅在瀏覽器中載入