SVG Color with class showing outline border-CodePudding

Here is an SVG image with stroke styling (not fill). I need to handle SVG color with a class name. So I have removed inline stroke="#000" from SVG path and added stroke: #000; property inside a class and used it. But it showing an outline over the SVG icon. How can I remove that outline border from SVG? If anyone have a solution to fix this problem, that would be great!

Code:

.color {
  stroke: red;
}

<h3>
  Actual Icon without class
</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>
  Added stroke color with css class
</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-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>

JSFiddle: https://jsfiddle.net/vishnuprasadps/3mr4b6sd/

CodePudding user response：

add the stroke to the path instead of the entire SVG:

.color path {
  stroke: red;
}

<h3>
  Actual Icon without class
</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>
  Added stroke color with css class
</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-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>