Fill color not changing on SVG

Question

I have an SVG that I'm trying to give a different color to. I've always done this before by giving my hex color to the fill option. This usually works like a charm and I go on my marry way. But for a reason I can't understand this is not working with my SVG. I'll post the code and explain more.

SVG

    <?xml version="1.0" encoding="UTF-8"?>
<svg width="30px" height="32px" viewBox="0 0 30 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 40.3 (33839) - http://www.bohemiancoding.com/sketch -->
    <title>resend</title>
    <desc>Created with Sketch.</desc>
    <defs></defs>
    <g id="App-Assets" stroke="#2C6D81" stroke-width="1" fill="#2C6D81" fill-rule="evenodd">
        <path d="M23.282379,28.3016743 C15.4171745,33.5297318 8.52508541,29.298172 8.52508541,29.298172 C8.52508541,29.298172 7.44663032,30.4349948 6.50599844,31.3964112 C5.56675873,32.4275162 5.1481845,32.0719627 5.00850508,30.8275258 C4.76766248,27.840877 4.27994463,22.3999616 4.27994463,22.3999616 L11.9711299,22.3999616 C13.3976235,22.3999616 14.0593605,22.755515 12.7725464,24.1426474 C11.8681106,25.2093077 10.9270146,26.3461305 10.9270146,26.3461305 C10.9270146,26.3461305 16.2872706,28.4092884 21.3681676,24.8537542 C25.056911,22.2942437 25.6499685,17.031579 25.6499685,15.9649187 C25.6499685,14.9333397 26.1028825,14.4720684 27.076462,14.4720684 L28.0152377,14.4720684 C28.9544774,14.4720684 29.4421952,15.0053986 29.4421952,15.9649187 C29.4440514,16.9239648 29.2700322,24.3204241 23.282379,28.3016743 L23.282379,28.3016743 Z M16.6696488,7.85735261 C17.5740847,6.79069235 18.5151806,5.65386954 18.5151806,5.65386954 C18.5151806,5.65386954 13.1549247,3.59071156 8.0740276,7.14624577 C4.38528426,9.70575632 3.79222677,14.968421 3.79222677,16.0350813 C3.79222677,17.0666603 3.33931275,17.5279316 2.36573324,17.5279316 L1.42695758,17.5279316 C0.487717858,17.5279316 1.86517468e-13,16.9946014 1.86517468e-13,16.0350813 C1.86517468e-13,15.1111164 0.174019217,7.71465717 6.15981622,3.69832573 C14.0250208,-1.56481303 20.9171098,2.70182801 20.9171098,2.70182801 C20.9171098,2.70182801 21.9955649,1.56500521 22.9361968,0.603588764 C23.8754365,-0.427516155 24.2940107,-0.0719627347 24.4336902,1.17247424 C24.6745328,4.15912297 25.1622506,9.60003844 25.1622506,9.60003844 L17.4710653,9.60003844 C16.0445718,9.60003844 15.3828347,9.24448502 16.6696488,7.85735261 L16.6696488,7.85735261 Z" id="resend" fill="#898989"></path>
    </g>
</svg>

As you can see I have a stroke and a fill. The weird part is that the stroke is working but the fill is not. I'm new to SVG's so I'm probably doing something obvious wrong but I'd love some help thanks!

You men the stroke on the g works but the fill does nothing? That's because you set a more specific fill attribute on the path itself. — Robert Longson

Daidon Daidon · Accepted Answer · 2016-11-18T02:43:17

It's pretty hidden, but at the end of the path tag you have a fill attribute. It has more priority than the previous one. Remove it and it will work:

<?xml version="1.0" encoding="UTF-8"?>
<svg width="30px" height="32px" viewBox="0 0 30 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 40.3 (33839) - http://www.bohemiancoding.com/sketch -->
    <title>resend</title>
    <desc>Created with Sketch.</desc>
    <defs></defs>
    <g id="App-Assets" stroke="#2C6D81" stroke-width="1" fill="#ff0000" fill-rule="evenodd">
        <path d="M23.282379,28.3016743 C15.4171745,33.5297318 8.52508541,29.298172 8.52508541,29.298172 C8.52508541,29.298172 7.44663032,30.4349948 6.50599844,31.3964112 C5.56675873,32.4275162 5.1481845,32.0719627 5.00850508,30.8275258 C4.76766248,27.840877 4.27994463,22.3999616 4.27994463,22.3999616 L11.9711299,22.3999616 C13.3976235,22.3999616 14.0593605,22.755515 12.7725464,24.1426474 C11.8681106,25.2093077 10.9270146,26.3461305 10.9270146,26.3461305 C10.9270146,26.3461305 16.2872706,28.4092884 21.3681676,24.8537542 C25.056911,22.2942437 25.6499685,17.031579 25.6499685,15.9649187 C25.6499685,14.9333397 26.1028825,14.4720684 27.076462,14.4720684 L28.0152377,14.4720684 C28.9544774,14.4720684 29.4421952,15.0053986 29.4421952,15.9649187 C29.4440514,16.9239648 29.2700322,24.3204241 23.282379,28.3016743 L23.282379,28.3016743 Z M16.6696488,7.85735261 C17.5740847,6.79069235 18.5151806,5.65386954 18.5151806,5.65386954 C18.5151806,5.65386954 13.1549247,3.59071156 8.0740276,7.14624577 C4.38528426,9.70575632 3.79222677,14.968421 3.79222677,16.0350813 C3.79222677,17.0666603 3.33931275,17.5279316 2.36573324,17.5279316 L1.42695758,17.5279316 C0.487717858,17.5279316 1.86517468e-13,16.9946014 1.86517468e-13,16.0350813 C1.86517468e-13,15.1111164 0.174019217,7.71465717 6.15981622,3.69832573 C14.0250208,-1.56481303 20.9171098,2.70182801 20.9171098,2.70182801 C20.9171098,2.70182801 21.9955649,1.56500521 22.9361968,0.603588764 C23.8754365,-0.427516155 24.2940107,-0.0719627347 24.4336902,1.17247424 C24.6745328,4.15912297 25.1622506,9.60003844 25.1622506,9.60003844 L17.4710653,9.60003844 C16.0445718,9.60003844 15.3828347,9.24448502 16.6696488,7.85735261 L16.6696488,7.85735261 Z" id="resend"></path>
    </g>
</svg>

This has actually already been answered in a comment 50 mins ago... Didn't see, I'm sorry

Fill color not changing on SVG

SVG

1 Answers