尽管这不是一个常见的文本效果，有时候有一些比较短的文本需要遵循环形路径显示。这种时候，CSS就弃我们而去了。没有任何CSS属性或功能可以完成这个效果，我们唯一想到的CSS解决方案都非常麻烦，所以我们也就只是想想而已。真的没有什么办法可以实现这样的样式吗？除了使用图像，除了不影响我们文本的整体美观？
在 juliancheal.co.uk 上使用环形文本作为左边的按钮（知道我指的是哪里吗？）；注意那里的环形文本是避免打破按钮的唯一办法，按钮形状的中间位置是由孔和螺纹组成的
解决方案
有一些脚本可以完成这个效果。它们通过将每个字母包裹在单独的 元素中，然后旋转到合适的角度来把它们一个一个组合成圆。这个方案不仅非常麻烦，而且还给页面的DOM元素添加了很多不必要的臃肿的标记。
尽管目前没有办法通过纯CSS来完成这个效果，但是我们可以通过一点内联SVG来很简单地完成。SVG本身就支持文本以任何路径显示，环形只不过是路径的一个特殊情况。我们来试一下！
SVG中文本按路径显示的基本方案是通过一个 元素来包裹我们的文本，把它放到一个 元素中。 元素通过 id 引用我们的路径中定义的 元素。在内联SVG中的文本还继承了我们的字体样式（除了 line-height ，因为这是SVG中默认的样式），所以我们不需要担心这个问题，就像我们引入一个外部的SVG图像一样。
可惜， 只可以存在于 元素中，这就是我们为什么不可以使用可读性更好的 元素作为我们的路径圆的原因。
假设我们要把“circular reasoning works because”这句话做成环形文本，占据一个圆圈的整个圆周，如图所示。
我们需要在HTML中添加一个内联SVG，并定义一个圆形路径：
查看更多关于CSS秘密花园：环形文本_html/css_WEB-ITnose的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did111579