1

我正在使用从Fontello生成的字体图标（网络字体） 。下载的包包括SVG 文件。

例子。我生成了仅包含 1 个图标（ mail-1 ）的 fontello 包，如下所示：

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg">
   <metadata>Copyright (C) 2015 by original authors @ fontello.com</metadata>
   <defs>
      <font id="fontello" horiz-adv-x="1000">
         <font-face font-family="fontello" font-weight="400" font-stretch="normal" units-per-em="1000" ascent="850" descent="-150" />
         <missing-glyph horiz-adv-x="1000" />
         <glyph glyph-name="mail-1" unicode="&#xe802;" d="m929 11v428q-18-20-39-37-149-114-238-188-28-24-46-38t-48-27-57-13h-2q-26 0-57 13t-48 27-46 38q-88 74-238 188-21 17-39 37v-428q0-8 6-13t12-5h822q7 0 12 5t6 13z m0 586v14t-1 7-1 7-3 5-5 4-8 2h-822q-7 0-12-6t-6-12q0-94 82-159 108-85 224-177 4-2 20-16t25-21 25-18 28-15 24-5h2q11 0 24 5t28 15 25 18 25 21 20 16q116 92 224 177 30 24 56 65t26 73z m71 21v-607q0-37-26-63t-63-27h-822q-36 0-63 27t-26 63v607q0 37 26 63t63 26h822q37 0 63-26t26-63z" horiz-adv-x="1000" />
      </font>
   </defs>
</svg>

由于类似的代码，我需要在 CSS 中使用这个图标作为背景图像：

.icon {
    background: url('data:image/svg+xml; ... ');
}

...我在https://css-tricks.com/using-svg/上读到了它...

但我不知道如何从我的 SVG (Fontello) 代码生成此数据：image/svg+xml代码。当然，我将这个 SVG 代码粘贴在背景中： url('data:image/svg+xml;...但它不起作用...帮助！

4

2 回答 2

1

我通过以下步骤创建了一个带有来自字形的路径的 svg 文件。

  • 首先，转到config.json并找到角色。

它应该是这样的：

{
      "uid": "91d1768d00bc3e6ee51c2fcea9810679",
      "css": "my-address",
      "code": 57514,
      "src": "custom_icons",
      "selected": true,
      "svg": {
        "path": "M994.5 17.7C988.8 11.8 980 10.1 972.5 13.6L11.3 454.7C3.6 458.3-0.9 466.5 0.2 474.9S7.8 490 16.2 491.4L447.3 563.7 496.6 971.1C497.7 979.6 504.1 986.4 512.6 987.9 513.7 988.1 514.8 988.2 515.8 988.2 523.1 988.2 529.9 984.1 533.2 977.4L998 39.8C1001.6 32.4 1000.2 23.6 994.5 17.7Z",
        "width": 1000
      },
      "search": [
        "myaddress-icon"
      ]
    }
  • 复制其path值并将其插入到像这样的 svg 的路径中（将 svg 的宽度和高度值设置为配置中的宽度值）：
<svg width="1000" height="1000" xmlns="http://www.w3.org/2000/svg">
  <path d="M994.5 17.7C988.8 11.8 980 10.1 972.5 13.6L11.3 454.7C3.6 458.3-0.9 466.5 0.2 474.9S7.8 490 16.2 491.4L447.3 563.7 496.6 971.1C497.7 979.6 504.1 986.4 512.6 987.9 513.7 988.1 514.8 988.2 515.8 988.2 523.1 988.2 529.9 984.1 533.2 977.4L998 39.8C1001.6 32.4 1000.2 23.6 994.5 17.7Z"/>
</svg>

并将其保存为 .svg 文件。

最后，您可以使用图像编辑器（我使用inkscape）打开它并将矢量图像调整到视图框。

您可以将其用作背景。

于 2020-03-11T10:53:10.963 回答
0
  1. 只需将图像<glyph>转换为<path>。
  2. 删除所有字形属性，如 unicode。
  3. 添加变换和缩放以实际以合适的大小显示元素

您可以transform='scale()'在路径元素上使用图标宽度的大小。
我选择使用 200px 作为它的大小（大约）

然后你可以在 url(); 中使用它。

.svgback {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><path transform='scale(0.2) translate(0 200)' d='m929 11v428q-18-20-39-37-149-114-238-188-28-24-46-38t-48-27-57-13h-2q-26 0-57 13t-48 27-46 38q-88 74-238 188-21 17-39 37v-428q0-8 6-13t12-5h822q7 0 12 5t6 13z m0 586v14t-1 7-1 7-3 5-5 4-8 2h-822q-7 0-12-6t-6-12q0-94 82-159 108-85 224-177 4-2 20-16t25-21 25-18 28-15 24-5h2q11 0 24 5t28 15 25 18 25 21 20 16q116 92 224 177 30 24 56 65t26 73z m71 21v-607q0-37-26-63t-63-27h-822q-36 0-63 27t-26 63v607q0 37 26 63t63 26h822q37 0 63-26t26-63z'/></svg>");
  width: 200px;
  height: 200px;
}
<div class="svgback"></div>

<!-- Image data -->
<!--svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <metadata>Copyright (C) 2015 by original authors @ fontello.com</metadata>
  <path transform='scale(0.2) translate(0 200)' d="m929 11v428q-18-20-39-37-149-114-238-188-28-24-46-38t-48-27-57-13h-2q-26 0-57 13t-48 27-46 38q-88 74-238 188-21 17-39 37v-428q0-8 6-13t12-5h822q7 0 12 5t6 13z m0 586v14t-1 7-1 7-3 5-5 4-8 2h-822q-7 0-12-6t-6-12q0-94 82-159 108-85 224-177 4-2 20-16t25-21 25-18 28-15 24-5h2q11 0 24 5t28 15 25 18 25 21 20 16q116 92 224 177 30 24 56 65t26 73z m71 21v-607q0-37-26-63t-63-27h-822q-36 0-63 27t-26 63v607q0 37 26 63t63 26h822q37 0 63-26t26-63z"
  />
</svg-->

于 2015-04-23T12:31:53.023 回答