TNotes.svg

Appearance

to top

0018. 使用 textPath 实现按照指定路径绘制文本 ​

  • 看下文档中提供的 demo 效果，很容易理解其作用。效果蛮惊艳的，不过不太常见。

1. 💻 demos.1 - textPath 基本使用 ​

xml
<!--
textPath mdn doc => https://developer.mozilla.org/zh-CN/docs/Web/SVG/Element/textPath

textPath 用于将文本沿着指定的路径进行排列，使文本能够遵循任何复杂形状或曲线，从而创造动态和视觉上吸引人的文本效果。

文字将按照 path 路径来展现。

<textPath> 使用 href 属性，链接指定 id 的 path 图形。
-->
<svg style="margin: 3rem;" width="500px" height="500px" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
  <path id="MyPath" fill="none" stroke="pink"
    d="M10,90 Q90,90 90,45 Q90,10 50,10 Q10,10 10,40 Q10,70 45,70 Q70,70 75,50" /> 

  <text fill="lightblue" font-size="8">
    <textPath href="#MyPath"> 
      Tdahuyou
      Tdahuyou
      Tdahuyou
      Tdahuyou
      Tdahuyou
      Tdahuyou
      Tdahuyou
      Tdahuyou
    </textPath>
  </text>
</svg>