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

时间：2016-11-07 07:13:06

标签： html css svg background-color fill

几天前，我收到了一些设计师的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 之外的其他内容吗？

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

2 个答案:

答案 0 :(得分：2)

CSS似乎会覆盖路径的填充属性

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

​path {
    fill: blue;
}​

更新您的Css 

div {
  fill: red;
}

svg {
  fill: blue;
}

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

下面的代码段示例

＆＃13;
＆＃13; 
div {
  fill: red;
}

svg {
  fill: blue;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：2)

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

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

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

  • M369 265.6 - m 将假想笔用于坐标（369,265.6）
  • v66.7 - 将 v ertical行绘制到一个低于前一点66.7单位距离的点
  • h-46.6 - 将 h orizo​​ntal线绘制到前一点左侧（垂直线的终点）距离为46.6个单位的点（因为价值为负而离开了）
  • v-66.7 - 将 v ertical线绘制到高于前一点66.7个单位的点
  • H369 - 将 H orizo​​ntal线绘制到X轴上代表369个单位的点（在这种情况下，它不是相对于前一个点，因为字母表是高于情况）。

现在单独上面会产生一个矩形。然后，您可以应用stroke（相当于边框）或fill（相当于背景颜色）。但在您的情况下，d属性还具有以下命令+参数，这些命令会创建内部框。

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

所以，最终形状如下所示：

enter image description here

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

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

我不知道为什么设计师使用过这样的方法，但在我看来，这既奇怪又错误。如果只需要一个大纲，设计师必须刚刚使用stroke的{​​{1}}属性，而不是创建一个内框并给它一个path。

无论如何，针对您的案例的修复方法是从所有fill元素的M属性的第二个d开始取消所有内容，然后只应用{{1 }} 给他们。对于path元素，也可以删除第二组坐标，如下面的代码段所示：

＆＃13;
＆＃13; 
fill
＆＃13; 
polygon
＆＃13;
＆＃13;
＆＃13;

注意：

  • 默认情况下，如果通过属性或CSS未指定.st0 { fill: #AAA; }，则会出现黑色填充。您可以通过将所需颜色指定为填充（或）来克服它，方法是将其设置为transparent / none。
  • CSS中指定的<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>属性 将优先于 而不是SVG元素中指定的fill属性。这是按照规范。
相关问题
最新问题