I'm displaying my `SVG` using `use` tag. I have all `fill` property in a separate class. On some event i will be need to change SVG elements colour. But unable to change the color. Don't know what mistake i'm into.

```css
.red{
  fill:red;
}
.overwrite .red{
  fill:blue;
}
```

```html
<div class="overwrite">
  <svg width="18" height="18" viewBox="0 0 18 18">
    <use xlink:href="#owned"></use>
  </svg>
</div>

<svg width="18" height="18" viewBox="0 0 18 18"  style="display:none" ><g id="owned" class="red">
    <path d="M10.3841197,9.97075733 L13.2351431,11.4015266 C14.9626648,11.9616921 15.8309505,12.9557364 15.9891455,14.4719879 C16.0178014,14.7466403 15.8183819,14.9925193 15.5437298,15.0211745 C15.5264933,15.0229729 15.5091749,15.0238739 15.4918448,15.0238739 L2.51884261,15.0238739 C2.24273586,15.0238522 2.01888584,14.7999955 2.01888584,14.5238739 C2.01888584,14.5045273 2.0200088,14.4851971 2.02224906,14.4659807 C2.19872996,12.9521713 3.06467543,11.9595935 4.69306731,11.4301408 L7.61375396,9.97075733 L7.1652223,9.07699038 L4.31419892,10.5077596 C2.39480463,11.1258644 1.25218198,12.4355796 1.02897609,14.3501842 C1.02225492,14.4078368 1.01888584,14.4658309 1.01888584,14.5238739 C1.01888584,15.3522606 1.69041424,16.023809 2.51880347,16.0238739 L9.09090532,16.0238739 L15.4918448,16.0238739 C15.543835,16.0238739 15.59579,16.0211709 15.6474995,16.0157759 C16.4714553,15.9298101 17.0697142,15.1921727 16.9837468,14.3682171 C16.7828597,12.4427753 15.6331205,11.126513 13.6120656,10.4785171 L10.8326513,9.07699038 L10.3841197,9.97075733 Z"/>
    <path d="M11.9769889,4.48241206 C11.9769889,2.54800219 10.807176,1.5 8.97698892,1.5 C7.12089292,1.5 5.97698892,2.53355002 5.97698892,4.48241206 C5.97698892,6.87094598 7.51565932,9.5 8.97698892,9.5 C10.4383185,9.5 11.9769889,6.87094598 11.9769889,4.48241206 Z M12.9769889,4.48241206 C12.9769889,7.3505461 11.1337512,10.5 8.97698892,10.5 C6.82022662,10.5 4.97698892,7.3505461 4.97698892,4.48241206 C4.97698892,1.9573661 6.58996061,0.5 8.97698892,0.5 C11.3364486,0.5 12.9769889,1.96971351 12.9769889,4.48241206 Z"/>
  </g>
</svg>
```

Refer sample code attached above

PS: Check the `.overwrite` class is not working.

Refer [fiddle](https://jsfiddle.net/0f89Lan0/)