Question

https://github.com/aspnet/Announcements/issues/231

如何在HTML5，CSS3或JS中创建这样的曲线文本？我知道变换：旋转（45度）;但那只是旋转它。我已经使用了Lettering.JS，但这似乎删除了我在文本上已有的任何jquery。（文本是倒计时有效，但是当与fonts.js一起使用使其弯曲时，倒计时不起作用。）

Answer 1

您可以使用 SVG 做到这一点。

text {
  font-size: 18px;
  font-family: sans-serif;
}

<svg viewBox="0 0 130 130">

  <path id="MyPath" fill="none" stroke="lightblue"
        d="m10,45c53,-33 96,3 96,3" />

  <text><textPath href="#MyPath">CURVE ME!</textPath></text>

</svg>

用html，css或JS修改文本？

1 个答案: