为svg元素的边框着色

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>

​