7

我有一个 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>

我猜这与图像的创建方式有关，但找不到太多关于如何解决问题的资源。任何帮助都是极好的！

谢谢。

4

3 回答 3

12

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

您需要将路径和文本转换为填充形状。在 Inkscape 中，尝试选择您的作品并按下CtrlShiftC。在 Illustrator 中，路径菜单中的某处有一个轮廓描边选项，如果我没记错的话，将文本转换为轮廓的命令是，⌘</kbd>ShiftC on a Mac (probably ControlShiftC otherwise).

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

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

于 2014-06-16T21:56:31.783 回答
5

聚会有点晚了，但我遇到了同样的问题，所以我创建了一个节点包来解决这个问题。

这是我通过修复程序运行后的 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 d="M86.837 79.979 C 85.648 80.263,84.203 80.888,83.627 81.366 C 80.532 83.935,80.666 78.331,80.676 204.800 C 80.684 298.546,80.862 324.015,81.520 325.313 C 81.978 326.219,83.371 327.646,84.616 328.485 L 86.880 330.011 206.491 329.839 L 326.103 329.667 328.385 327.176 L 330.667 324.686 330.664 205.176 C 330.662 88.016,330.636 85.625,329.367 83.543 C 328.654 82.374,327.380 81.024,326.536 80.543 C 325.285 79.829,303.087 79.648,207.000 79.564 C 142.100 79.507,88.027 79.694,86.837 79.979 M315.835 204.833 L 315.667 315.000 205.667 315.000 L 95.667 315.000 95.498 204.833 L 95.329 94.667 205.667 94.667 L 316.004 94.667 315.835 204.833 M201.667 111.423 C 179.577 112.824,159.847 121.654,143.696 137.367 C 129.783 150.904,121.330 166.288,117.228 185.541 C 115.150 195.292,115.144 212.170,117.214 221.792 C 120.507 237.099,126.508 249.962,135.686 261.389 L 139.212 265.778 130.329 276.056 C 125.444 281.708,121.673 286.570,121.950 286.860 C 122.463 287.397,171.797 284.871,172.790 284.257 C 173.650 283.726,173.457 280.317,171.348 258.667 C 169.053 235.120,168.747 232.657,168.126 232.694 C 167.873 232.708,163.617 237.490,158.667 243.319 C 153.717 249.148,149.440 253.936,149.163 253.958 C 148.228 254.036,142.022 245.037,139.077 239.333 C 133.176 227.903,130.621 217.133,130.615 203.667 C 130.612 194.149,131.713 187.008,134.444 178.832 C 144.896 147.548,174.861 126.000,207.913 126.000 C 245.648 126.000,277.349 152.422,284.737 190.029 C 285.202 192.397,285.582 198.533,285.582 203.667 C 285.582 213.615,284.891 218.403,282.218 226.971 C 277.195 243.073,265.595 258.719,251.958 267.787 C 249.394 269.492,247.379 271.069,247.481 271.290 C 248.939 274.458,254.512 283.326,255.048 283.329 C 255.441 283.331,257.991 281.800,260.715 279.927 C 282.280 265.091,296.736 241.199,300.043 214.926 C 301.036 207.038,300.543 192.970,299.018 185.667 C 289.357 139.397,248.759 108.436,201.667 111.423 M202.120 160.810 C 201.391 162.748,195.065 179.433,188.064 197.888 C 181.062 216.343,175.333 231.568,175.333 231.721 C 175.333 231.875,178.049 232.000,181.367 232.000 L 187.401 232.000 188.262 229.833 C 188.736 228.642,190.255 224.436,191.638 220.488 L 194.154 213.310 209.828 213.488 L 225.502 213.667 228.665 222.667 L 231.829 231.667 237.968 231.859 C 243.609 232.036,244.075 231.955,243.722 230.859 C 243.510 230.203,237.210 213.467,229.721 193.667 L 216.105 157.667 209.776 157.477 L 203.447 157.286 202.120 160.810 M215.923 187.752 C 218.899 195.865,221.333 202.690,221.333 202.918 C 221.333 203.147,216.083 203.333,209.667 203.333 C 203.250 203.333,198.000 203.185,198.000 203.003 C 198.000 202.821,200.283 196.446,203.072 188.836 C 205.862 181.226,208.455 174.138,208.833 173.084 C 209.715 170.630,209.421 170.024,215.923 187.752 " stroke="none" fill="black" fill-rule="evenodd"></path>
</svg>

  • 这是使用软件包修复后 SVG 在icomoon.io上的样子。

  • 在它看起来像这样之前。

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

于 2020-05-26T15:24:20.977 回答
0

在illustrator中将文本转换为轮廓的命令是：shift+command+O for mac。或 1. 选择文本 2. 输入 -> 创建大纲

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

于 2017-12-11T16:54:27.840 回答