Question

所以我有一个svg心形图标。我想将心脏的边框设为黑色，因此我使用stroke: black将边框设为黑色。但这也使外部矩形边框着色为黑色，这在这种情况下是不希望的。将心脏的边界涂成黑色的正确方法是什么？

element.style {
    fill: rgb(156, 39, 176);
    stroke: rgba(0, 0, 0, 0.87);
    stroke-width: 2px;
}

<svg class="MuiSvgIcon-root-233" focusable="false" viewBox="0 0 24 24" aria-hidden="false" role="presentation"
style="fill: rgb(156, 39, 176); stroke: rgba(0, 0, 0, 0.87); stroke-width: 2px;">
<path fill="none" d="M0 0h24v24H0z">
</path>
<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z">
  </path>
</svg>

Answer 1

svg代码中没有不必要的<path fill="none" d="M0 0h24v24H0z"> </path>。只需将其删除。这是清理过的svg：

svg {
  width: 100px;
}

path {
  stroke: black;
  fill: none;
}

<svg class="MuiSvgIcon-root-233" viewBox="0 0 24 24">
  <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"></path>
</svg>

Answer 2

您有两个路径，而CSS会同时选择它们。

您需要通过为每个路径指定类别或ID或使用nth选择器来指定要定位的目标

svg {
  width: 150px;
  margin: 1em;
}

path:nth-child(1) {
  stroke: none;
}

<svg class="MuiSvgIcon-root-233" focusable="false" viewBox="0 0 24 24" aria-hidden="false" role="presentation" style="fill: rgb(156, 39, 176); stroke: rgba(0, 0, 0, 0.87); stroke-width: 2px;">
<path fill="none" d="M0 0h24v24H0z">
</path>
<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z">
  </path>
</svg>

上色SVG元素的边框

2 个答案: