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

Question

我有一个图像，我正在从应用程序Nucleo导出为SVG。如果您在浏览器中查看SVG，它看起来很好，但是通过svgtofont运行它后，它变成了一个黑盒。当前的存储库有许多SVG，所有的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代码！