SVG转换为字体后会变成黑色方块

Question

我有一个图像，我正在从应用Nucleo导出为SVG。如果您在浏览器中查看SVG，它看起来不错，但在通过svgtofont运行后，它会变成一个黑框。目前的回购有很多SVG，它们都很好，只是这一个有问题。

这是SVG的代码，其中是否有与将其转换为字体不兼容的内容？

<svg width="16" height="16" viewBox="0 0 16 16" version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<title>asset</title>
<g class="nc-icon-wrapper">
<defs>
<path d="M8 0c.558 0 1.01.452 1.01 1.009v1.069a5.97 5.97 0 0 1 4.909 4.913h1.072a1.009 1.009 0 1 1 0 2.018h-1.078a5.974 5.974 0 0 1-4.903 4.855v1.127a1.01 1.01 0 0 1-2.019 0v-1.132a5.975 5.975 0 0 1-4.853-4.85H1.01a1.009 1.009 0 1 1 0-2.018h1.122a5.974 5.974 0 0 1 4.859-4.909V1.009A1.01 1.01 0 0 1 8 0zm0 3.939a4.061 4.061 0 1 0 0 8.123 4.061 4.061 0 0 0 0-8.123zm0 2.07a1.992 1.992 0 1 1 .001 3.983 1.992 1.992 0 0 1 0-3.984z" id="path-1"/>
</defs>
<g id="Tracking" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="&#x21B3;-&#x1F3A8;Color">
<mask id="mask-2" fill="#fff">
<use xlink:href="#path-1"/>
</mask>
<use id="Mask" fill="#000" xlink:href="#path-1"/>
<g id="Group" mask="url(#mask-2)" fill="#1B2431">
<g id="&#x21B3;-&#x1F3A8;Color">
<path id="Base" d="M0 0h16v16H0z"/>
</g>
</g>
</g>
</g>
</g>
</svg>

Answer 1

尝试使用这个：

<svg width="16" height="16" viewBox="0 0 16 16" version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<title>asset</title>
<path d="M8 0c.558 0 1.01.452 1.01 1.009v1.069a5.97 5.97 0 0 1 4.909 4.913h1.072a1.009 1.009 0 1 1 0 2.018h-1.078a5.974 5.974 0 0 1-4.903 4.855v1.127a1.01 1.01 0 0 1-2.019 0v-1.132a5.975 5.975 0 0 1-4.853-4.85H1.01a1.009 1.009 0 1 1 0-2.018h1.122a5.974 5.974 0 0 1 4.859-4.909V1.009A1.01 1.01 0 0 1 8 0zm0 3.939a4.061 4.061 0 1 0 0 8.123 4.061 4.061 0 0 0 0-8.123zm0 2.07a1.992 1.992 0 1 1 .001 3.983 1.992 1.992 0 0 1 0-3.984z" id="path-1"/>
</svg>

在您的示例中，ID为Base的路径使用此掩码以一种非常人为的方式将自己截断。我只是复制了掩码路径，并将其保留为路径，并删除了其他所有内容！

演示：https://codepen.io/EightArmsHQ/pen/bcde36ccc9e6b5b8a8e8e22cdaf58a2d

我不时地为自己摆弄SVG代码而感到高兴！