0

I'm using an external svg file for my graphics. I have a few that are multi color and look something like this.

<svg xmlns="http://www.w3.org/2000/svg" style="display:none;">

    <symbol viewBox="0 0 300 220" id="some_logo">
        <path id="shape01" d="...." />
        <path id="shape02" d="...." />
        <path id="shape03" d="...." />
    </symbol>

    <symbol>...</symbol>
    <symbol>...</symbol>
    <symbol>...</symbol>

</svg>

of course using it in the HTML looks like this.

<svg>
    <use xlink:href="../../assets/symbol_sprite.svg#some_logo" />
</svg>

The problem I'm having is I would like to target the #shape01, #shape02 and #shape03 ids to apply different css fills. So far I tried

<use xlink:href="../../assets/symbol_sprite.svg#some_logo/#shape01" />
<use xlink:href="../../assets/symbol_sprite.svg#some_logo#shape01" />
<use xlink:href="../../assets/symbol_sprite.svg#some_logo>#shape01" />

just to see if I could find a way of targeting them but nothing happened. I went to googling everything I could think of that might get a result but didn't get anything. How can we target those elements?

Optiq
  • 2,835
  • 4
  • 33
  • 68
  • [If you want to keep your SVG in (external) files, the CSS needs to be defined inside of the SVG file.](https://stackoverflow.com/a/20720935/2908724) – bishop Feb 24 '18 at 06:41
  • If you want different fills - create different sprites. – Robert Longson Feb 24 '18 at 07:16
  • https://stackoverflow.com/questions/48940642/controlling-svg-colors-with-css/48943654#48943654 shows how you have to change your sprite file to leverage CSS variables for coloring different parts of a symbol. (Note that this works both for symbols defined inline and referenced form external files.) – ccprog Feb 24 '18 at 14:23

0 Answers0