color of SVG icon isn't changing completely-CodePudding

I'm trying to change the color of the svg by passing the color attribute. In my case to black. The result is as on the screenshot below:

I'm using React and have my custom Icon components which accepts SVG attribute props, such as color. As you can see the icon is not completely in black. There are just a few of my icons behave like this.

<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" fill="none">

    <g>
        <title>Layer 1</title>
        <path id="svg_1" stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="#CED4DA"
              d="m22,19.336l0,-1.448c0,-0.3534 -0.1403,-0.692 -0.39,-0.9421l-0.9433,-1.6099l-9.3334,0l-0.9431,1.6097c-0.2498,0.25 -0.3901,0.5889 -0.3902,0.9423l0,1.448c0,0.7363 0.597,1.3333 1.3333,1.3333l9.3334,0c0.7363,0 1.3333,-0.597 1.3333,-1.3333z"/>
        <path stroke-width="1.5" id="svg_2" stroke-linejoin="round" stroke-linecap="round" stroke="#CED4DA"
              d="M10.3725 2.00265C10.89 1.97036 11.3808 2.23557 11.6374 2.6862L12.6667 6.00265H3.33337L4.36271 2.6862C4.61928 2.23557 5.11005 1.97036 5.6276 2.00265L10.3725 2.00265Z"/>
        <path id="svg_3" stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="#CED4DA"
              d="m12.6666,18l1.3334,0"/>
        <path id="svg_4" stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="#CED4DA"
              d="m18,18l1.3333,0"/>
        <path id="svg_5" stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="#CED4DA"
              d="m11.3334,20.6667l0,1.3333"/>
        <path id="svg_6" stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="#CED4DA"
              d="m20.6666,20.6667l0,1.3333"/>
        <path id="svg_7" stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="#CED4DA"
              d="m13.90741,10.0027l0,-1.44805l0,0.00029c0,-0.35338 -0.1403,-0.6923 -0.39,-0.9423l-0.9433,-1.60998l-9.33337,0l-0.94311,1.60977l0,0c-0.24979,0.24996 -0.39014,0.58885 -0.39022,0.94222l0,1.44805l0,0c0,0.7363 0.59695,1.3333 1.33333,1.3333l9.33337,0l0,0c0.7363,0 1.3333,-0.597 1.3333,-1.3333c0,0 0,0 0,0l0,0z"/>
        <path id="svg_9" stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="#CED4DA"
              d="m4.66663,8.66666l1.33333,0"/>
        <path id="svg_10" stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="#CED4DA"
              d="m10,8.66666l1.3333,0"/>
        <path id="svg_11" stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="#CED4DA"
              d="m3.33337,11.3333l0,1.3333"/>
        <path id="svg_12" stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="#CED4DA"
              d="m12.6666,11.3333l0,1.3333"/>
        <path id="svg_13" stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="#CED4DA"
              d="m16,11.336l2.3725,0c0.5175,-0.0323 1.0083,0.2329 1.2649,0.6835l1.0293,3.3165l-9.3333,0l0.2071,-0.6667"/>
    </g>
</svg>

CodePudding user response：

I can't reproduce the output as in the screenshot, but your <path>s have their own stroke="#CED4DA" attributes, so they won't inherit their stroke color from the svg. You can try to change them to stroke="currentColor". Then the "color" attribute of the svg will affect all those paths.

<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" fill="none" color="black">

    <g>
        <title>Layer 1</title>
        <path id="svg_1" stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="currentColor"
              d="m22,19.336l0,-1.448c0,-0.3534 -0.1403,-0.692 -0.39,-0.9421l-0.9433,-1.6099l-9.3334,0l-0.9431,1.6097c-0.2498,0.25 -0.3901,0.5889 -0.3902,0.9423l0,1.448c0,0.7363 0.597,1.3333 1.3333,1.3333l9.3334,0c0.7363,0 1.3333,-0.597 1.3333,-1.3333z"/>
        <path stroke-width="1.5" id="svg_2" stroke-linejoin="round" stroke-linecap="round" stroke="currentColor"
              d="M10.3725 2.00265C10.89 1.97036 11.3808 2.23557 11.6374 2.6862L12.6667 6.00265H3.33337L4.36271 2.6862C4.61928 2.23557 5.11005 1.97036 5.6276 2.00265L10.3725 2.00265Z"/>
        <path id="svg_3" stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="currentColor"
              d="m12.6666,18l1.3334,0"/>
        <path id="svg_4" stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="currentColor"
              d="m18,18l1.3333,0"/>
        <path id="svg_5" stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="currentColor"
              d="m11.3334,20.6667l0,1.3333"/>
        <path id="svg_6" stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="currentColor"
              d="m20.6666,20.6667l0,1.3333"/>
        <path id="svg_7" stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="currentColor"
              d="m13.90741,10.0027l0,-1.44805l0,0.00029c0,-0.35338 -0.1403,-0.6923 -0.39,-0.9423l-0.9433,-1.60998l-9.33337,0l-0.94311,1.60977l0,0c-0.24979,0.24996 -0.39014,0.58885 -0.39022,0.94222l0,1.44805l0,0c0,0.7363 0.59695,1.3333 1.33333,1.3333l9.33337,0l0,0c0.7363,0 1.3333,-0.597 1.3333,-1.3333c0,0 0,0 0,0l0,0z"/>
        <path id="svg_9" stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="currentColor"
              d="m4.66663,8.66666l1.33333,0"/>
        <path id="svg_10" stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="currentColor"
              d="m10,8.66666l1.3333,0"/>
        <path id="svg_11" stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="currentColor"
              d="m3.33337,11.3333l0,1.3333"/>
        <path id="svg_12" stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="currentColor"
              d="m12.6666,11.3333l0,1.3333"/>
        <path id="svg_13" stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="currentColor"
              d="m16,11.336l2.3725,0c0.5175,-0.0323 1.0083,0.2329 1.2649,0.6835l1.0293,3.3165l-9.3333,0l0.2071,-0.6667"/>
    </g>
</svg>

CodePudding user response：

Changing the fill color works.

You need to right-click and inspect. Perhaps some other icon is above it ?

document.getElementById("cars").style.fill='black';

<svg id="cars" width="24" height="24" xmlns="http://www.w3.org/2000/svg" fill="none">

    <g>
        <title>Layer 1</title>
        <path id="svg_1" stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="#CED4DA"
              d="m22,19.336l0,-1.448c0,-0.3534 -0.1403,-0.692 -0.39,-0.9421l-0.9433,-1.6099l-9.3334,0l-0.9431,1.6097c-0.2498,0.25 -0.3901,0.5889 -0.3902,0.9423l0,1.448c0,0.7363 0.597,1.3333 1.3333,1.3333l9.3334,0c0.7363,0 1.3333,-0.597 1.3333,-1.3333z"/>
        <path stroke-width="1.5" id="svg_2" stroke-linejoin="round" stroke-linecap="round" stroke="#CED4DA"
              d="M10.3725 2.00265C10.89 1.97036 11.3808 2.23557 11.6374 2.6862L12.6667 6.00265H3.33337L4.36271 2.6862C4.61928 2.23557 5.11005 1.97036 5.6276 2.00265L10.3725 2.00265Z"/>
        <path id="svg_3" stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="#CED4DA"
              d="m12.6666,18l1.3334,0"/>
        <path id="svg_4" stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="#CED4DA"
              d="m18,18l1.3333,0"/>
        <path id="svg_5" stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="#CED4DA"
              d="m11.3334,20.6667l0,1.3333"/>
        <path id="svg_6" stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="#CED4DA"
              d="m20.6666,20.6667l0,1.3333"/>
        <path id="svg_7" stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="#CED4DA"
              d="m13.90741,10.0027l0,-1.44805l0,0.00029c0,-0.35338 -0.1403,-0.6923 -0.39,-0.9423l-0.9433,-1.60998l-9.33337,0l-0.94311,1.60977l0,0c-0.24979,0.24996 -0.39014,0.58885 -0.39022,0.94222l0,1.44805l0,0c0,0.7363 0.59695,1.3333 1.33333,1.3333l9.33337,0l0,0c0.7363,0 1.3333,-0.597 1.3333,-1.3333c0,0 0,0 0,0l0,0z"/>
        <path id="svg_9" stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="#CED4DA"
              d="m4.66663,8.66666l1.33333,0"/>
        <path id="svg_10" stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="#CED4DA"
              d="m10,8.66666l1.3333,0"/>
        <path id="svg_11" stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="#CED4DA"
              d="m3.33337,11.3333l0,1.3333"/>
        <path id="svg_12" stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="#CED4DA"
              d="m12.6666,11.3333l0,1.3333"/>
        <path id="svg_13" stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="#CED4DA"
              d="m16,11.336l2.3725,0c0.5175,-0.0323 1.0083,0.2329 1.2649,0.6835l1.0293,3.3165l-9.3333,0l0.2071,-0.6667"/>
    </g>
</svg>