如何为 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 它的外观：fiddle

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

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

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

Answer 1

CSS 似乎覆盖了路径的 fill 属性，

您可以将 CSS 应用于 SVG，但您需要匹配元素，就像在设置样式时一样 HTML。如果你只想将它应用到所有 SVG 路径，你可以使用，例如：

path {
    fill: blue;
}

更新您的 Css

div {
  fill: red;
}

svg {
  fill: blue;
}

// This does not work
.st0 {
  fill: red;
}

下面的代码片段示例

div {
  fill: red;
}

svg {
  fill: blue;
}

<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>
<path class="st0" d="M537.3 341.1v42.3H209v-42.3H537.3M537.8 340.6H208.5v43.3h329.3V340.6L537.8 340.6z"></path>

</svg>
</div>

Answer 2

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

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

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

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

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

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

因此，最终的形状如下所示：

当您在此处将 fill 应用于形状时，您只会看到 橙色区域 ，这就是为什么它看起来像边框而不是填充。

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，则会有黑色填充。您可以通过将所需颜色指定为填充（或）将其设置为 transparent/none.
在CSS中指定的fill属性优先于fill SVG 元素中指定的属性。这是符合规范的。

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

How to color path elements in SVG?

html

css

svg

background-color

fill