CSS如何实现印章文字围绕圆形排版样式?

时雨
  • 80
山东

CSS如何实现这种文字围绕圆形并且始终居中的效果。

回复
阅读 2.3k
4 个回答

可以用 svg 中的 textPath 来实现

<svg viewBox="0 0 300 150" height="150">
  <path id="circle" stroke="deepskyblue" fill="none" d="M90 75a60 60 0 1 0 120 0a60 60 0 1 0 -120 0z"/>
  <text>
    <textPath href="#circle">环绕文本</textPath>
  </text>
</svg>

image.png

可以参考这篇文章

https://www.zhangxinxu.com/wo...

可以使用svg实现,或者一个字一个dom做旋转

css 只能作旋转变换,建议用 svg 文本路径,另外,以前做作业时用 canvas 写过弧形文本(具有自动居中效果),这里也放上来当做参考

image.png

Pen: https://codepen.io/mannix-zho...

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏