时间戳

首页 > 解决方案 > SVG 转换为字体时变成黑色方块

css - SVG 转换为字体时变成黑色方块

问题描述

我有一张从应用程序 Nucleo 导出为 SVG 的图像。如果您在浏览器中查看 SVG，它看起来不错，但在运行后svgtofont会变成一个黑匣子。当前的 repo 有很多 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>

标签： csssvg

解决方案

尝试使用这个：

<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 代码！

推荐阅读