2014-06-16 38 views
2

我有一个svg,当在任何浏览器中打开时,罚款。我试图使用http://icomoon.io/将它们中的一部分转换为字体图标,但导入后无法正确显示。我尝试使用http://fontastic.me/以及但没有运气。使用icomoon将SVG转换为字体图标

这里是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> 

我猜测它是与图像是如何产生的,但无法找到如何解决这个问题多少资源。任何帮助都是极好的!

谢谢。

+0

(http://jsfiddle.net/Zeaklous/m3Jrs/) –

回答

7

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

您需要将路径和文本转换为填充形状。在Inkscape中,尝试选择您的作品并按CtrlShiftC。在Illustrator中,有某个地方的轮廓笔划选项在Path的菜单,以及将文本转换为轮廓的命令是,如果我没有记错,Ç在Mac(可能控制移上C否则)。

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

不要期待完美的结果。 IcoMoon做了一个合理的工作,但它可能会在某些情况下将曲线转换成直线。

+0

谢谢[这是什么问题?]!我终于想出了如何使用探路者和对象标签:) –

+1

对于Inkskape笔画组合>>路径是** Ctrl + Alt + C **和** Ctrl + Shift + C **是用于object->路径 – Nicolai