起始偏移

Baseline 已广泛支持

此特性已相当成熟,可在许多设备和浏览器版本上使用。自 ⁨2015 年 7 月⁩以来,各浏览器均已提供此特性。

startOffset 属性定义了在将路径转换为 <textPath> 元素的坐标系统后,相对于路径起点的当前文本的初始偏移量。

你可以将此属性与以下 SVG 元素一起使用

示例

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%)。

规范

规范
Scalable Vector Graphics (SVG) 2
# TextPathElementStartOffsetAttribute

浏览器兼容性