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

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

A.

我猜这与图像是如何创建的有关，但是在如何解决这个问题上找不到太多的资源。任何帮助都会很棒

---

谢谢。

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

您需要将路径和文本转换为填充形状。在Inkscape中，尝试选择您的艺术品并按Ctrl-Shift键。在Illustrator中，路径菜单中有一个轮廓笔划选项，如果我没记错的话，将文本转换为轮廓的命令是，⌘Mac上的ShiftC（可能是ControlShiftC）

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

---

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

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

---

更多信息：

派对有点晚，但我面临同样的问题，所以我创建了一个解决这个问题的解决方案

下面是通过修复程序运行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在使用包修复后的样子。

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

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

---

谢谢！我最终找到了如何使用pathfinder和object选项卡：）对于Inkskape，stroke->path的组合是Ctrl+Alt+C，Ctrl+Shift+C是object->pathCtrl+Alt+C在Inkskape中工作，如果可以降低精度（3位数精度意味着将10.000像素填充到1中）它节省了使用时间SVGMO@Danny你是说用这个？它在什么地方不起作用了吗？Jake网站为我工作，它是@Danny'365CSI'Engelman的GUI，你在用哪个GUI？我刚刚通过CLI和它测试了SVG。请在上提交一个问题，提供尽可能多的信息，以便我可以尝试解决它。我们有一些误解。我建议将SVGO功能添加到您的工具中。