使用CSS变形文本

Question

在CSS或SVG中，是否可以对文本进行扭曲，使其看起来像是写在球体上或使用放大镜查看？

类似于此

的内容

我一直在浏览互联网，但找不到任何指南。

Answer 1

所有评论都说不能做到这一点是错误的。是的，可以完成。嗯，这不容易，但可能。让我们从头开始。

1。甚至不考虑编写代码。你需要一个矢量图形软件。我在这个项目中使用了Corel Draw。

2。您需要创建所有文字，应用所有转化，设置每个字母的样式，添加阴影，背景或任何您需要的内容。

这是我创建的一个简单项目。这是一个快速草稿，但您可以将文本设置为与照片完全相同的样式。您可以轻松地使中间的所有字母都比其他字母大。

（抱歉，这不是英文！）

3. 强制Corel Draw或任何其他程序使用字体而非曲线保存svg。

4. 我分析了代码，我发现每个字母都以字形方式保存：

<glyph horiz-adv-x="222" unicode="l"><path d="m63.876 0.23623l-2.504 715.49 87.971 0.33072 2.504-715.49-87.971-0.33072z"/></glyph>

其他一些字母将保存为文本并应用转换：

<text class="fil1 fnt0" x="1045" y="1269"><tspan rotate="335">L</tspan></text>

<强> 5。完整代码看起来像这样。它的长。我把它缩小了一点。

FIDDLE：https://jsfiddle.net/ubw1rdq7/

解决方案2 - 更容易

如果因为文件可能很大而保存了每个字母，那就不好玩了。您可以将文本保存为曲线，并且只有一个路径。这将表现得像一个图像，但您可以将代码内联到您的HTML。

这是一个小提琴： https://jsfiddle.net/wyfhfjo4/

在这两种情况下，所有代码的大小都超过30kb，我只进行了简单的转换。我希望我能告诉你如何达到预期的效果。 99％的项目是在像Corel Draw这样的矢量编辑软件中工作，并将所有转换应用到文本中。

对于任何三维变换，最好将文本转换为曲线，因为它肯定会更容易。作为输出，您将获得不是字形的路径。

Answer 2

可以在SVG中使用feDisplacementMap执行此操作，但目前Chrome中存在此问题，因此对您没有用处。