求助：移除通过CSS类设置stroke的SVG图标多余轮廓的方法

问题描述 #

我有一个采用stroke样式（而非fill）的SVG图标，希望通过CSS类来控制其颜色。于是我移除了SVG path中的内联stroke="#000"，并在类中添加stroke: red;属性并应用，但图标出现了多余的轮廓。请问如何移除这个SVG的多余轮廓？

问题原因 #

你看到的多余轮廓来自SVG内部的<rect id="Rectangle_1087">元素——这个矩形是图标参考占位框，仅设置了fill="none"但未明确取消描边。当你给整个SVG添加stroke: red;的CSS类时，这个矩形会继承该描边属性，从而显示出多余的边框。

解决方案 #

有两种简单的解决方式：

方法1：给占位矩形添加stroke="none" #

直接修改SVG中的矩形元素，明确取消它的描边：

<rect id="Rectangle_1087" data-name="Rectangle 1087" width="24" height="24" transform="translate(456 131)" fill="none" stroke="none" />

方法2：调整CSS选择器，仅针对path设置描边 #

修改CSS，让描边样式只作用于SVG内部的路径元素，而非整个SVG：

.color path {
  stroke: red;
}

修正后的完整代码 #

CSS #

.color path {
  stroke: red;
}

HTML #

<h3>
  原始图标（未加类）
</h3>

<svg xmlns="http://www.w3.org/2000/svg" width="24.227" height="24.227" viewBox="0 0 24.227 24.227">
  <g id="MyOrder_icon" transform="translate(-455.887 -130.885)">
    <rect id="Rectangle_1087" data-name="Rectangle 1087" width="24" height="24" transform="translate(456 131)" fill="none" />
    <g id="Group_844" data-name="Group 844" transform="translate(424.693 99.691)">
      <path id="Path_434" data-name="Path 434" d="M48.862,37.755a2.357,2.357,0,0,1-.122-3.2.2.2,0,0,0-.011-.265L46.5,32.059a.2.2,0,0,0-.278,0l-3.55,3.55a1.192,1.192,0,0,0-.288.466,1.194,1.194,0,0,1-.755.757,1.2,1.2,0,0,0-.467.288l-9.1,9.1a.2.2,0,0,0,0,.278l2.227,2.227a.2.2,0,0,0,.265.011,2.357,2.357,0,0,1,3.323,3.323.2.2,0,0,0,.011.265l2.227,2.227a.2.2,0,0,0,.278,0l9.105-9.1a1.2,1.2,0,0,0,.288-.467,1.194,1.194,0,0,1,.755-.757,1.192,1.192,0,0,0,.466-.288l3.55-3.55a.2.2,0,0,0,0-.278l-2.227-2.227a.2.2,0,0,0-.265-.011A2.357,2.357,0,0,1,48.862,37.755Z" fill="none" stroke="#000" stroke-width="1.5" />
      <path id="Path_435" data-name="Path 435" d="M234.858,124.8l-.868-.868m3.182,3.182-.579-.578m2.893,2.893-.578-.579m3.182,3.182-.868-.868" transform="translate(-192.016 -87.39)" fill="none" stroke="#000" stroke-linecap="round" stroke-width="1.5" />
    </g>
  </g>
</svg>

<br /><br /><br /><br />

<h3>
  添加CSS描边颜色后的图标
</h3>

<svg class="color" xmlns="http://www.w3.org/2000/svg" width="24.227" height="24.227" viewBox="0 0 24.227 24.227">
  <g id="MyOrder_icon" transform="translate(-455.887 -130.885)">
    <rect id="Rectangle_1087" data-name="Rectangle 1087" width="24" height="24" transform="translate(456 131)" fill="none" />
    <g id="Group_844" data-name="Group 844" transform="translate(424.693 99.691)">
      <path id="Path_434" data-name="Path 434" d="M48.862,37.755a2.357,2.357,0,0,1-.122-3.2.2.2,0,0,0-.011-.265L46.5,32.059a.2.2,0,0,0-.278,0l-3.55,3.55a1.192,1.192,0,0,0-.288.466,1.194,1.194,0,0,1-.755.757,1.2,1.2,0,0,0-.467.288l-9.1,9.1a.2.2,0,0,0,0,.278l2.227,2.227a.2.2,0,0,0,.265.011,2.357,2.357,0,0,1,3.323,3.323.2.2,0,0,0,.011.265l2.227,2.227a.2.2,0,0,0,.278,0l9.105-9.1a1.2,1.2,0,0,0,.288-.467,1.194,1.194,0,0,1,.755-.757,1.192,1.192,0,0,0,.466-.288l3.55-3.55a.2.2,0,0,0,0-.278l-2.227-2.227a.2.2,0,0,0-.265-.011A2.357,2.357,0,0,1,48.862,37.755Z" fill="none" stroke-width="1.5" />
      <path id="Path_435" data-name="Path 435" d="M234.858,124.8l-.868-.868m3.182,3.182-.579-.578m2.893,2.893-.578-.579m3.182,3.182-.868-.868" transform="translate(-192.016 -87.39)" fill="none" stroke-linecap="round" stroke-width="1.5" />
    </g>
  </g>
</svg>

内容的提问来源于stack exchange，提问作者vishnu