startOffset

Базовая поддержка Широко доступно

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и в разных версиях браузеров. Она доступна во всех браузерах с ⁨июля 2015 г.⁩.

Атрибут startOffset задаёт смещение от начала пути для начальной позиции текущего текста вдоль пути после преобразования пути в систему координат элемента <textPath>.

Этот атрибут можно использовать со следующими элементами SVG:

<textPath>

Пример

<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>

Совместимость с браузерами

	Настольные компьютеры					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android	WebView на iOS
`startOffset`	1	12	20	15	3.1	18	20	14	2	1.0	4.4	2

© 2005–2025 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/startOffset