javascript - 如何让文字环绕成圆形？

Question

我想借助 CSS 或 JavaScript 将文本环绕在圆形图像周围，如下所示。

#corner {
  border-radius: 100%;
  background: url(https://osiprodwusodcspstoa01.blob.core.windows.net/en-us/media/187a9a09-fb97-4a5e-a8a2-620c782d6c67.png);
  background-position: left top;
  background-repeat: repeat;
  padding: 20px;
  width: 150px;
  height: 150px;
}

<p id="corner"></p>

我已经在 Internet 上进行了搜索，但没有找到任何有用的信息。

Answer 1

您可以在 SVG 中使用 <textPath> 执行此操作.如果您使用 SVG，则无需将文本分解为单独的字符。该路径只是一个使用 elliptical arc commands 编写的圆圈.

<svg viewBox="0 0 400 400">
  <defs>
    <path id="MyPath"
          d="M 200, 200
             m -100, 0
             a 100,100 0 1,1 200,0
             a 100,100 0 1,1 -200,0
" />
  </defs>

  <text font-family="Verdana" font-size="30" fill="rgb(248,203,173)" stroke="rgb(237,125,49)">
    <textPath xlink:href="#MyPath">
      I want to bend my text around the circle.
    </textPath>
  </text>
  <circle fill="none" stroke="rgb(165,195,251)" cx="200" cy="200" r="80" stroke-width="10" filter="blur(3px)" />
  <circle fill="rgb(146,208,80)" stroke="rgb(169,209,142)" stroke-width="2px" cx="200" cy="200" r="78" />
</svg>