<textPath>
Baseline 廣泛可用 *
<textPath> SVG 元素用於沿 <path> 元素的形狀渲染文字。文字必須包含在 <textPath> 元素內，並且其 href 屬性用於引用所需的 <path>。
使用語境
屬性
href-
用於渲染文字的路徑或基本形狀的 URL。如果設定了
path屬性，href將不起作用。值型別：<URL>；預設值：無；可動畫：是 長度調整-
在文字上應用長度調整的位置：字形之間的間距，或間距和字形本身。值型別：
spacing|spacingAndGlyphs；預設值：spacing；可動畫：是 method（方法）-
沿路徑渲染單個字形的方法。值型別：
align|stretch；預設值：align；可動畫：是 path實驗性-
文字應渲染的路徑。值型別：<path_data>；預設值：無；可動畫：是
side實驗性-
文字應渲染在路徑的哪一側。值型別：
left|right；預設值：left；可動畫：是 間距-
如何處理字形之間的空格。值型別：
auto|exact；預設值：exact；可動畫：是 起始偏移-
文字開頭距離路徑開頭的偏移量。值型別：<length> | <percentage> | <number>；預設值：
0；可動畫：是 文字長度-
文字將渲染的空間的寬度。值型別：<length> | <percentage> | <number>；預設值：auto；可動畫：是
DOM 介面
此元素實現了 SVGTextPathElement 介面。
示例
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>
規範
| 規範 |
|---|
| Scalable Vector Graphics (SVG) 2 # TextPathElement |
瀏覽器相容性
載入中…