如何使用 CSS 将引导图标从轮廓转换为填充

Question

我一直在尝试使用描边和填充将引导图标从轮廓更改为填充。

例如：

 <svg width="22" height="22"  viewBox="0 0 16 16" class="bi bi-house-door" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                  <path fill-rule="evenodd"  d="M7.646 1.146a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 .146.354v7a.5.5 0 0 1-.5.5H9.5a.5.5 0 0 1-.5-.5v-4H7v4a.5.5 0 0 1-.5.5H2a.5.5 0 0 1-.5-.5v-7a.5.5 0 0 1 .146-.354l6-6zM2.5 7.707V14H6v-4a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 .5.5v4h3.5V7.707L8 2.207l-5.5 5.5z"/>
                  <path fill-rule="evenodd"  d="M13 2.5V6l-2-2V2.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5z"/>
                </svg>

我有一个概述的主页图标：

我怎样才能把它转移到这个：

动态使用填充、描边和填充规则。我已经尝试过更改描边和填充规则，但我仍然无法将第一个对象转换为第二个对象。有什么办法可以做到吗？

Answer 1

答案是否定的。没有办法使用 CSS 填充房子的内部。至少在一般意义上不适用于任何形状 ^*.

原因是轮廓就是形状。 SVG 包含两个 <path> 元素。

1. 房子轮廓。
2. 烟囱

房屋轮廓路径由两个子路径组成。第一个它包含两个子路径，一个是房屋形状的最外侧边界，第二个是中间的透明孔。

如果我们将第一条路径分成这两个子路径并给它们涂上不同的颜色，你会看到发生了什么。

svg {
  width: 300px;
  height: 300px;
}

path:nth-child(1) {
  fill: red;
}

path:nth-child(2) {
  fill: yellow;
}

path:nth-child(3) {
  fill: blue;
}

<svg width="22" height="22"  viewBox="0 0 16 16" class="bi bi-house-door" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
   <!-- path 1 subpath 1 - the outline (red) -->
   <path fill-rule="evenodd"  d="M7.646 1.146a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 .146.354v7a.5.5 0 0 1-.5.5H9.5a.5.5 0 0 1-.5-.5v-4H7v4a.5.5 0 0 1-.5.5H2a.5.5 0 0 1-.5-.5v-7a.5.5 0 0 1 .146-.354l6-6z"/>
   <!-- path 1 subpath 2 - the house inside (yellow) -->
   <path fill-rule="evenodd"  d="M2.5 7.707V14H6v-4a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 .5.5v4h3.5V7.707L8 2.207l-5.5 5.5z"/>
   <!-- path 2 - the chimney (blue) -->
   <path fill-rule="evenodd"  d="M13 2.5V6l-2-2V2.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5z"/>
</svg>

如果您想要房子的填充版本，您需要修改 SVG 本身。只需删除房屋“内部”的子路径即可。

svg {
  width: 300px;
  height: 300px;
}

<svg width="22" height="22"  viewBox="0 0 16 16" class="bi bi-house-door" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
   <path fill-rule="evenodd"  d="M7.646 1.146a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 .146.354v7a.5.5 0 0 1-.5.5H9.5a.5.5 0 0 1-.5-.5v-4H7v4a.5.5 0 0 1-.5.5H2a.5.5 0 0 1-.5-.5v-7a.5.5 0 0 1 .146-.354l6-6z"/>
   <path fill-rule="evenodd"  d="M13 2.5V6l-2-2V2.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5z"/>
</svg>

---

^* 从技术上讲，您可以使用 CSS 实现这一点。但是 CSS 将特定于这个特定的图标，而不是普遍适用于具有相同问题的其他图标。

此外，以这种方式修改路径是一项尚未被所有浏览器支持的新功能。 例如，此示例适用于 Chrome，但不适用于 Firefox。

svg {
  width: 300px;
  height: 300px;
}

path:nth-child(1) {
  d: path('M7.646 1.146a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 .146.354v7a.5.5 0 0 1-.5.5H9.5a.5.5 0 0 1-.5-.5v-4H7v4a.5.5 0 0 1-.5.5H2a.5.5 0 0 1-.5-.5v-7a.5.5 0 0 1 .146-.354l6-6z');
}

<svg width="22" height="22"  viewBox="0 0 16 16" class="bi bi-house-door" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
   <path fill-rule="evenodd"  d="M7.646 1.146a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 .146.354v7a.5.5 0 0 1-.5.5H9.5a.5.5 0 0 1-.5-.5v-4H7v4a.5.5 0 0 1-.5.5H2a.5.5 0 0 1-.5-.5v-7a.5.5 0 0 1 .146-.354l6-6zM2.5 7.707V14H6v-4a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 .5.5v4h3.5V7.707L8 2.207l-5.5 5.5z"/>
   <path fill-rule="evenodd"  d="M13 2.5V6l-2-2V2.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5z"/>
</svg>