如何在SVG中实现‘Bowtie’样式文本？

当然可以实现这种领结（Bowtie）样式的文本啦！我懂Canvas里做这个挺顺手，但SVG是基于元素的，换个思路就能搞定～下面给你两种实用的方案，都能做出你想要的效果：

方案1：拆分文本+反向倾斜变换 #

这是最直观的方法，把文本拆成上下两半，分别给它们做反向的倾斜变换，再调整位置让中间对齐，领结的造型就出来了：

<svg width="400" height="200" viewBox="0 0 400 200">
  <!-- 上半部分文本：向右倾斜 -->
  <text x="200" y="80" text-anchor="middle" font-size="48" font-weight="bold" fill="#333" transform="skewX(25)">BOWTIE</text>
  <!-- 下半部分文本：向左倾斜，调整y坐标让中间交汇 -->
  <text x="200" y="130" text-anchor="middle" font-size="48" font-weight="bold" fill="#333" transform="skewX(-25)">BOWTIE</text>
</svg>

你可以随便调整skewX的角度（比如把25改成30）、文本的y坐标，就能精准控制领结的收紧程度，完全匹配你想要的样子。

方案2：用滤镜实现整体变形 #

要是不想拆分文本，也可以用SVG的滤镜给整个文本一键套上领结变形效果，适合需要批量应用样式的场景：

<svg width="400" height="200" viewBox="0 0 400 200">
  <defs>
    <!-- 定义领结变形滤镜，参数可以微调 -->
    <filter id="bowtieFilter">
      <feTransform type="matrix" values="1 0.3 0.3 1 0 0" />
    </filter>
  </defs>
  <!-- 给文本应用滤镜 -->
  <text x="200" y="120" text-anchor="middle" font-size="48" font-weight="bold" fill="#333" filter="url(#bowtieFilter)">BOWTIE</text>
</svg>

不过滤镜的变形效果相对固定，要是你需要更精准的领结形状，方案1的拆分变换会更灵活。

如果还想让文本中间部分真正“收紧”（不是简单倾斜），还可以结合<clipPath>或者路径文本<textPath>来优化，但上面两种方法已经能覆盖大部分需求啦～

内容的提问来源于stack exchange，提问作者Ali Kazmi