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/
可以使用SVG中的feDisplacementMap来实现这一点,但是目前在当前版本的Chrome中存在错误,所以对您来说并不是很有用。