任何字形图标都可以只是一条路径吗？答案

【问题标题】：Can any glyphicon just be a single path?任何字形图标都可以只是一条路径吗？
【发布时间】：2019-02-18 16:56:45
【问题描述】：

我说的是 svg 格式的单色图标。 stackoverflow 网站右上角的图标就是一个例子。

我注意到 twitter bootstrap 上的所有图标都只是一条路径（即使它们由许多元素组成）： https://getbootstrap.com/docs/3.3/components/

  <path d="M250 700h800q21 0 35.5 -14.5t14.5 -35.5v-200q0 -21 -14.5 -35.5t-35.5 -14.5h-800q-21 0 -35.5 14.5t-14.5 35.5v200q0 21 14.5 35.5t35.5 14.5z" />

但其他图标集如： https://glyph.smarticons.co/

他们的字形由多个元素组成：

<path d="M7.984,0.053 C3.599,0.053 0.045,3.614 0.045,8.006 C0.045,12.398 3.6,15.959 7.984,15.959 C12.368,15.959 15.923,12.398 15.923,8.006 C15.923,3.614 12.369,0.053 7.984,0.053 L7.984,0.053 Z M7.49,2.045 C8.328,2.045 9.009,2.699 9.009,3.505 C9.009,4.311 8.328,4.965 7.49,4.965 C6.65,4.965 5.971,4.311 5.971,3.505 C5.971,2.699 6.65,2.045 7.49,2.045 L7.49,2.045 Z M8.035,14.908 C4.984,14.908 2.342,10.918 8.101,7.984 C13.357,5.308 10.904,0.744 8.035,1.008 C12.41,1.008 14.974,4.119 14.974,7.958 C14.975,11.797 11.867,14.908 8.035,14.908 L8.035,14.908 Z" class="si-glyph-fill"></path>
<ellipse cx="8.493" cy="11.445" rx="1.493" ry="1.445" class="si-glyph-fill"></ellipse>

我注意到使用矢量程序可以将对象转换为路径，然后组合所有路径。

但我想知道理论上是否可以通过这种方式将每个字形图标转换为单个路径？或者有没有图标不能出现的情况？

【问题讨论】：

对于某些路径，您需要一个 fill-rule="evenodd" 才能看到“洞”。但是在这种情况下，原始图纸需要以特定的方式绘制。更具体地说，路径的片段必须以相反的方向绘制，以便能够看到孔。还有一个问题：一些字形可能不仅包含路径，还包含圆圈、省略号。 . .等等。在这种情况下，您需要一种将这些原语转换为路径的方法。
@enxaneta 我的理解是任何对象（圆、椭圆）都可以使用矢量程序转换为路径。并且可以将多个路径转换为单个路径。

标签： xml svg vector graphics glyphicons

【解决方案1】：

这是一个愚蠢的例子：你有 2 个简单的 svg 图片。第一个只有一条路径。对于第二个，我从第一个 SVG 中提取了点，并制作了 2 条路径。这两张图片看起来很像。

svg{display:inline-block;border:1px,solid;}
path{fill:none; stroke:black;}

<svg viewBox="0 0 300 300" width="300">
  <path id="test" d="M50,50L250,100L150,200L30,250z
                     M100,100 L120 180L170,170z"/>
  
</svg>

<svg viewBox="0 0 300 300" width="300">
  <path id="test" d="M50,50L250,100L150,200L30,250z"/>
  <path id="test" d="M100,100 L120 180L170,170z" />
  
</svg>

现在你移除描边并让填充为黑色：

svg{border:1px solid;display:inline-block;}

<svg viewBox="0 0 300 300" width="300">
  <path id="test" d="M50,50L250,100L150,200L30,250z
                     M100,100 L120 180L170,170z" />
  
</svg>

<svg viewBox="0 0 300 300" width="300">
  <path id="test" d="M50,50L250,100L150,200L30,250z"/>
  <path id="test" d="M100,100 L120 180L170,170z" />
  
</svg>

【讨论】：