转换为图标字体时不显示 SVG 描边

标签 svg fonts

目标

我正在尝试创建一个 SVG 图标以添加到图标字体文件中。

进展

我已经创建了一个 SVG 图标,它以内嵌的形式完美呈现并作为 img

问题

当我上传它以添加到我的图标字体时,同时使用 Icomoon 和 Fontastic,所有填充都出现了,但所有笔划都丢失了。我已经通过 W3C 验证程序运行代码并且没有遇到任何问题,我想知道图标字体是否比普通 SVG 有更多的规则?

enter image description here

代码

<svg version="1.1" width="51" height="51" xmlns="http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink">
  <polygon points="0,5.5 31,0 31,50 0,44" />
  <ellipse cx="15" cy="25" rx="7.5" ry="11" fill="transparent" stroke="white" stroke-width="5" />
  <path d="M31 10.5 L48.5 10.5 L49 11 L50 12.5 L35 23 L31 20" stroke-width="2" fill="white" stroke="black" />
  <path d="M52 12 L35 23 L31 20 L31 24 L35 27 L50 16.5" fill="black" />
  <path d="M31 24 L35 27 L50 16.5 L50 35 L49.5 37 L47.5 37.5 L31 37.5" stroke-width="2" fill="white" stroke="black" />
</svg>

最佳答案

来自 Iconmoon ...

  • 应用忽略笔画。您可以将它们转换为填充。
  • 联合/组合您的填充。
  • 所有颜色都被解释为黑色。不要使用白色打洞,而是从背景形状中减去前景形状。

这些似乎是您必须遵守的非常严格的规则。

来源... https://icomoon.io/docs.html

关于转换为图标字体时不显示 SVG 描边,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27864266/

相关文章:

windows - "Correct"Windows 上的对话框/UI 字体

ios - UIView iOS 9 中的碰撞边界路径原点

javascript - 平滑地动画化属性一次更改为 ~3000 个 Raphael 对象

svg - React Native 从文件中显示 SVG

具有非标准样式的 CSS 字体

google-chrome - Google Web Fonts 和其他字体在 Firefox 中显得粗体和锯齿状

ios - SVG文件定义的CGPath上的CAKeyFrameAnimation有点生涩。

html - IE10 模糊使用 SVG 和背景大小 : cover;

ios - 快速为整个 iOS 应用程序使用自定义字体

css - primefaces 5.2 Font Awesome