<textPath>
示例
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; 可動畫:是
使用上下文
規範
| 規範 |
|---|
| 可縮放向量圖形 (SVG) 2 # TextPathElement |
瀏覽器相容性
BCD 表格僅在瀏覽器中載入