startOffset

SVG 元素
1. A
2. B-C
3. D
  1. <defs>
  2. <desc>
4. E
  1. <ellipse>
5. F
6. G
7. H
  1. <hkern>
8. I
  1. <image>
9. J-L
  1. <line>
  2. <linearGradient>
10. M
11. N-P
12. Q-R
  1. <radialGradient>
  2. <rect>
13. S
  1. <script>
  2. <set>
  3. <stop>
  4. <style>
  5. <svg>
  6. <switch>
  7. <symbol>
14. T
15. U
  1. <use>
16. V-Z
  1. <view>
  2. <vkern>

startOffset attribute defines an offset from the start of the path for the initial current text position along the path after converting the path to the <textPath> element's coordinate system.

You can use this attribute with the following SVG elements:

<textPath>

范例

html,body,svg { height:100% }

<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`
Animatable	Yes

<length-percentage>
<number>

注意： Negative values and values larger than the path length (e.g. 150% ) are allowed.

规范

规范	状态	注释
Scalable Vector Graphics (SVG) 2 The definition of 'startOffset' in that specification.	候选推荐	无变化
Scalable Vector Graphics (SVG) 1.1 (Second Edition) The definition of 'startOffset' in that specification.	推荐	初始定义

浏览器兼容性

BCD tables only load in the browser

Found a problem with this page?

Edit on GitHub
Source on GitHub
Report a problem with this content on GitHub
Want to fix the problem yourself? See our Contribution guide .

最后修改： Sep 23, 2021 , 由 MDN 贡献者