Question

我有一个svg，当在任何浏览器中打开时都很好。我正在尝试使用http://icomoon.io/将其中一堆转换为字体图标，但导入后无法正确显示。我也尝试使用http://fontastic.me/，但没有运气。

这是SVG图像标记 -

 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" width="400px" height="400px" viewBox="0 0 400 400" enable-background="new 0 0 400 400" xml:space="preserve" style="
    color: red;
">
<path fill="none" stroke="#231F20" stroke-width="15" stroke-miterlimit="10" d="M323.41,321.664c0,0.457-0.371,0.828-0.828,0.828  H88.835c-0.458,0-0.829-0.371-0.829-0.828V87.918c0-0.459,0.371-0.829,0.829-0.829h233.747c0.457,0,0.828,0.37,0.828,0.829V321.664z  " style="
    color: red;
"/>
<path fill="none" stroke="#231F20" stroke-width="15" stroke-miterlimit="10" d="M215.311,196.935"/>
<path fill="none" stroke="#231F20" stroke-width="15" stroke-miterlimit="10" d="M250.935,277.399  c25.36-14.769,42.409-42.247,42.409-73.71c0-47.078-38.164-85.242-85.242-85.242s-85.242,38.164-85.242,85.242  c0,31.463,17.048,58.941,42.408,73.71"/>
<g>
    <path fill="#231F20" d="M173.653,282.14l-4.741-48.439c-0.059-0.58-0.327-1.092-0.715-1.482l-47.088,54.471   c0.48,0.449,1.127,0.714,1.82,0.676l48.578-2.721C172.82,284.568,173.783,283.448,173.653,282.14z"/>
</g>
<text transform="matrix(1 0 0 1 175.665 231.1914)" fill="#231F20" stroke="#231F20" stroke-width="2" stroke-miterlimit="10" font-family="'Helvetica'" font-size="99.4919">A</text>
</svg>

我猜它与图像的创建方式有关，但找不到很多关于如何解决问题的资源。任何帮助都会很棒！

感谢。

Answer 1

IcoMoon将忽略笔划属性和文本对象。它只对填充形状感兴趣。在您的情况下，这意味着它只会导入圆形曲线末端的三角形。

您需要将路径和文本转换为填充形状。在Inkscape中，尝试选择您的作品并按 Ctrl Shift C 。在Illustrator中，路径菜单中的某处有一个 Outline Stroke 选项，如果我没记错的话，将文本转换为轮廓的命令是⌘ Shift C （可能是 Control Shift C 。

如果您有任何重叠的对象，它们可能也必须合并在一起。

不要指望完美的结果。 IcoMoon做得很合理，但在某些情况下它可能会将曲线转换为直线。

Answer 2

在Illustrator中将文本转换为大纲的命令是：shift + command + O for mac。要么 1.选择文字 2.类型 - ＆gt;创建大纲

更多信息：http://reachheadwear.com/illustrator-101-creating-outlines

Answer 3

聚会晚了一点，但是我面临着同样的问题，所以我创建了一个node package来解决这个问题。

这是我通过修复程序运行后的SVG代码。

python -m venv neuralcoref
source neuralcoref/bin/activate
CFLAGS='-stdlib=libc++' pip install thinc==6.10.3
pip install msgpack==0.5.6
CFLAGS='-stdlib=libc++' pip install spacy==2.0.12  # <-- not 2.0.13
pip install https://github.com/huggingface/neuralcoref-models/releases/download/en_coref_lg-3.0.0/en_coref_lg-3.0.0.tar.gz

使用包修复后，icomoon.io上的SVG如下所示。
之前看起来像这样。

请注意图标中间缺少的“ A”和颜色不匹配

使用icomoon将SVG转换为字体图标

3 个答案: