textPath

Baseline Widely available *

This feature is well established and works across many devices and browser versions. Itâs been available across browsers since â¨2015å¹´7æâ©.

* Some parts of this feature may have varying levels of support.

ä½¿ç¨ä¸ä¸æ

ç±»å«	ææ¬åå®¹åç´ ãææ¬åå®¹ååç´
åè®¸çåå®¹	åç¬¦æ°æ®åä»»ææ°éãä»»æé¡ºåºçä¸ååç´ ï¼ æè¿°æ§åç´ `<a>`ã`<animate>`ã`<discard>`ã`<set>`ã`<tspan>`

ç¤ºä¾

html

<svg
  width="100%"
  height="100%"
  viewBox="0 0 1000 300"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <path
      id="MyPath"
      d="M 100 200
             C 200 100 300   0 400 100
             C 500 200 600 300 700 200
             C 800 100 900 100 900 100" />
  </defs>

  <use xlink:href="#MyPath" fill="none" stroke="red" />

  <text font-family="Verdana" font-size="42.5">
    <textPath xlink:href="#MyPath">
      We go up, then we go down, then up again
    </textPath>
  </text>

  <!-- Show outline of the viewport using 'rect' element -->
  <rect
    x="1"
    y="1"
    width="998"
    height="298"
    fill="none"
    stroke="black"
    stroke-width="2" />
</svg>

å³æ¶ç»æï¼