html - 如何为 SVG 中的路径元素着色？

Question

几天前我从一些设计师那里收到了一个 SVG，我要用一些颜色改变和典型的悬停效果等来实现它，/edit: 但现在主要的事情就是能够控制背景颜色/edit/。

HTML 看起来像这样:

<div>
  <svg class="drawelements" viewBox="50 200 550 360">
    <polygon fill="red" points="312.200 265.600, 312.200 332.300, 265.600 332.300, 265.600 265.600, 312.200 265.600, 312.700 265.100, 265.100 265.100, 265.100 332.800, 312.700 332.800, 312.700 265.100, 312.700 265.100"></polygon>
    <path class="st0" d="M369 265.6v66.7h-46.6v-66.7H369M369.5 265.1h-47.6v67.7h47.6V265.1L369.5 265.1z"></path>
    <path class="st0" d="M425.7 265.6v66.7h-46.6v-66.7H425.7M426.2 265.1h-47.6v67.7h47.6V265.1L426.2 265.1z"></path>
    <path class="st0" d="M480.6 265.6v66.7H434v-66.7H480.6M481.1 265.1h-47.6v67.7h47.6V265.1L481.1 265.1z"></path>
    <path class="st0" d="M537.3 265.6v66.7h-46.6v-66.7H537.3M537.8 265.1h-47.6v67.7h47.6V265.1L537.8 265.1z"></path>
    <path class="st0" d="M255.5 265.6v66.7H209v-66.7H255.5M256 265.1h-47.6v67.7H256V265.1L256 265.1z"></path>
    <path class="st0" d="M537.3 207.3v49.4H209v-49.4H537.3M537.8 206.8H208.5v50.4h329.3V206.8L537.8 206.8z"></path>
  </svg>
</div>

下面是它的外观:fiddle

我想用顶部的多边形进行测试，只是为了确保它不是对我不利的路径元素。

使用 CSS 的常规样式不起作用，每个元素中的硬编码样式也不起作用。是不是因为我需要使用 background-color 或 fill 以外的东西？

如果你看 fiddle ，请不要介意 viewBox。实际的 svg 包含更多我为这篇文章删除的元素。

Answer 1

您使用的代码没有错。通常，用颜色填充 SVG 框或形状的方法是使用 fill 属性，但问题出在 path 元素上。

在所提供的代码中，路径元素的创建方式是在形状的中心留下一个间隙。该形状实际上更像是一个框架，而不是实心板，这就是应用fill 看起来不像在应用的原因形状的背景颜色。

path 元素的 d 属性具有坐标并定义形状的绘制方式 - 下面是对其解释方式的解释:

• M369 265.6 - m将虚笔移到坐标(369,265.6)
• v66.7 - 绘制一条垂直垂直线到比上一个点低 66.7 个单位距离的点
• h-46.6 - 绘制一条h水平线到前一个点(垂直线的终点)左侧的点46.6个单位的距离(左边是因为值为负)
• v-66.7 - 绘制一条垂直垂直线到比前一个点高 66.7 个单位的点
• H369 - 在 X 轴上代表 369 个单位的点绘制一条 H 水平线(在这种情况下它与前一点无关，因为字母表是大写的)。

现在仅以上内容就可以生成一个矩形。然后，您可以对其应用 stroke(相当于边框)或 fill(相当于背景色)。但在您的情况下，d 属性还具有以下创建内框 的命令和参数。

M369.5 265.1h-47.6v67.7h47.6V265.1L369.5 265.1z

所以，最终的形状是这样的:

当您在此处对形状应用填充时，您只会看到橙色区域，这就是它看起来像的原因边框而不是填充。

This MDN tutorial有关于 SVG path 元素及其命令的更多信息。

---

我不知道为什么设计师会使用这样的方法，但在我看来这是既奇怪又错误的。如果只需要一个轮廓，设计者一定只是使用了 path 的 stroke 属性，而不是创建一个内部框并给它一个 fill 。

无论如何，您的情况的解决方法是取消所有 path 的 d 属性的第二个 M 开始的所有内容元素，然后对它们应用 fill。对于 polygon 元素，第二组坐标也可以删除，如下面的代码片段所示:

.st0 {
  fill: #AAA;
}

<div>
  <svg class="drawelements" viewBox="50 200 550 360">
    <polygon fill="red" points="312.200 265.600, 312.200 332.300, 265.600 332.300, 265.600 265.600, 312.200 265.600"></polygon>
    <path class="st0" d="M369 265.6v66.7h-46.6v-66.7H369z"></path>
    <path class="st0" d="M425.7 265.6v66.7h-46.6v-66.7H425.7z"></path>
    <path class="st0" d="M480.6 265.6v66.7H434v-66.7H480.6z"></path>
    <path class="st0" d="M537.3 265.6v66.7h-46.6v-66.7H537.3z"></path>
    <path class="st0" d="M255.5 265.6v66.7H209v-66.7H255.5z"></path>
    <path class="st0" d="M537.3 207.3v49.4H209v-49.4H537.3z"></path>
    <path class="st0" d="M537.3 341.1v42.3H209v-42.3H537.3z"></path>
  </svg>
</div>

注意:

• 默认情况下，如果未通过属性或 CSS 指定 fill，则填充为黑色。您可以通过将所需颜色指定为填充(或)将其设置为透明/无来克服它。
• 在 CSS 中指定的 fill 属性将优先于在 SVG 元素中指定的 fill 属性。这是符合规范的。