startOffset
示例
html
<svg viewBox="0 0 220 100" xmlns="http://www.w3.org/2000/svg">
<path
id="path1"
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" />
<path
id="path2"
fill="none"
stroke="red"
d="M130,90 Q210,90 210,45 Q210,10 170,10 Q130,10 130,40 Q130,70 165,70 Q190,70 195,50" />
<text>
<textPath href="#path1" startOffset="0">
Quick brown fox jumps over the lazy dog.
</textPath>
</text>
<text>
<textPath href="#path2" startOffset="40">
Quick brown fox jumps over the lazy dog.
</textPath>
</text>
</svg>
使用说明
值 |
<length-percentage> | <number> |
---|---|
默认值 | 0 |
可动画 | 是 |
<length-percentage>
-
长度表示沿路径的距离,以
<textPath>
元素的当前用户坐标系中测量的距离。如果给出了百分比,则起始偏移量表示沿整个路径的百分比距离。因此,
0%
表示路径的起点,100%
表示路径的终点。 <number>
-
此值表示沿路径的距离,以
<textPath>
元素的当前用户坐标系中测量的距离。
注意: 允许负值和大于路径长度的值(例如 150%
)。
规范
规范 |
---|
可缩放矢量图形 (SVG) 2 # TextPathElementStartOffsetAttribute |
浏览器兼容性
BCD 表格仅在浏览器中加载