Changing fill to svg with <use>

Question

I'm trying to load in my HTML, the colors that are set in the .svg file with <use> but for some reason it doesn't load.

HTML

<svg>
    <use xlink:href="img/beer-05.svg#beer"></use>
</svg>

beer-05.svg

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<style type="text/css">
    #beer1 {fill:#ffc32e;}
    #beer2 {fill:#f2a33a;}
    #beer3 {fill:#fffade;}
    #beer4 {fill:#ffffff;}
    #beer1:hover {fill:green;}
</style>
<symbol id="beer" viewBox="0 0 32 32">
    <path id="beer1" d="M19.8,17.5v2.4v2.4v1.4v1v3.8V44h8.5c3,0,5.4-2.4,5.4-5.4V28.5v-3.8v-1v-1.4v-2.4v-2.4H19.8z"/>
    <path id="beer2" d="M5.9,15.2v4.8v3.8v1v3.8v10.2c0,3,2.4,5.4,5.4,5.4h8.5V28.5v-3.8v-1v-3.8v-4.8H5.9z" />
    <rect x="19.8" y="14.2" fill="none" width="13.9" height="4.8"/>
    <path id="beer3" fill="#FFFADE" d="M9.4,38.5L9.4,38.5c-0.6,0-1-0.5-1-1V24c0-0.6,0.5-1,1-1h0c0.6,0,1,0.5,1,1v13.5
            C10.4,38.1,9.9,38.5,9.4,38.5z"/>
    <path id="beer4" fill="#FFFFFF" d="M35.3,18.5c-0.2,0-0.4,0-0.6,0v-0.2c0-0.4,0-0.8-0.1-1.2c2.1-1.7,3.1-4.2,2.3-6.3c-0.4-1.1-1.2-2-2.3-2.6
            c-0.9-2.1-3.2-3.9-6.2-4.6c-1.6-0.4-3.2-0.4-4.5-0.1c-1.3-1-3.2-1.5-5.2-1.4c-2.6,0.2-4.7,1.4-5.7,3c-0.6,0-1.3,0-2,0.1
            c-5.2,0.6-9.1,4.3-8.6,8.3c0.2,1.7,1.2,3.2,2.6,4.3c0,0.2,0,0.4,0,0.6v20.3c0,3.5,2.9,6.4,6.4,6.4h17c3.5,0,6.3-2.8,6.4-6.3
            c0.2,0,0.4,0,0.6,0c4.5,0,8.2-4.5,8.2-10.1S39.8,18.5,35.3,18.5z M32.7,38.1v0.5c0,2.4-2,4.4-4.4,4.4h-17c-2.4,0-4.4-2-4.4-4.4
            V18.8c1.7,0.7,3.6,1,5.7,0.7c1.6-0.2,3.1-0.7,4.4-1.4c1.9,2.2,5.1,3.5,8.8,3.3c2.8-0.2,5.2-1.2,6.9-2.8v0.5V38.1z M35.3,35.2
            c-0.2,0-0.4,0-0.6-0.1v-13c0.2,0,0.4-0.1,0.6-0.1c2.5,0,4.7,3,4.7,6.6S37.8,35.2,35.3,35.2z"/>
</symbol>

could someone help me with this?

Answer 1

As defined in the specs , you can't address <use> elements via CSS.

CSS2 selectors cannot be applied to the (conceptually) cloned DOM tree because its contents are not part of the formal document structure.

Check this answer .

In your case, I would embed the external svg with <object> , after altering the external svg file to look like:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="280" viewBox="0 0 32 32" preserveAspectRatio="xMinYMin meet">

<defs>
    <style type="text/css">

    #beer1 {fill:#ffc32e;}
    #beer2 {fill:#f2a33a;}
    #beer3 {fill:#fffade;}
    #beer4 {fill:#ffffff;}
    #beer1:hover {fill:green;}

    </style>
</defs>

    <path id="beer1"  d="M19.8,17.5v2.4v2.4v1.4v1v3.8V44h8.5c3,0,5.4-2.4,5.4-5.4V28.5v-3.8v-1v-1.4v-2.4v-2.4H19.8z"/>
    <path id="beer2" fill="#f2a33a" d="M5.9,15.2v4.8v3.8v1v3.8v10.2c0,3,2.4,5.4,5.4,5.4h8.5V28.5v-3.8v-1v-3.8v-4.8H5.9z" />
    <rect x="19.8" y="14.2" fill="none" width="13.9" height="4.8"/>
    <path id="beer3" fill="#FFFADE" d="M9.4,38.5L9.4,38.5c-0.6,0-1-0.5-1-1V24c0-0.6,0.5-1,1-1h0c0.6,0,1,0.5,1,1v13.5
            C10.4,38.1,9.9,38.5,9.4,38.5z"/>
    <path id="beer4" fill="#FFFFFF" d="M35.3,18.5c-0.2,0-0.4,0-0.6,0v-0.2c0-0.4,0-0.8-0.1-1.2c2.1-1.7,3.1-4.2,2.3-6.3c-0.4-1.1-1.2-2-2.3-2.6
            c-0.9-2.1-3.2-3.9-6.2-4.6c-1.6-0.4-3.2-0.4-4.5-0.1c-1.3-1-3.2-1.5-5.2-1.4c-2.6,0.2-4.7,1.4-5.7,3c-0.6,0-1.3,0-2,0.1
            c-5.2,0.6-9.1,4.3-8.6,8.3c0.2,1.7,1.2,3.2,2.6,4.3c0,0.2,0,0.4,0,0.6v20.3c0,3.5,2.9,6.4,6.4,6.4h17c3.5,0,6.3-2.8,6.4-6.3
            c0.2,0,0.4,0,0.6,0c4.5,0,8.2-4.5,8.2-10.1S39.8,18.5,35.3,18.5z M32.7,38.1v0.5c0,2.4-2,4.4-4.4,4.4h-17c-2.4,0-4.4-2-4.4-4.4
            V18.8c1.7,0.7,3.6,1,5.7,0.7c1.6-0.2,3.1-0.7,4.4-1.4c1.9,2.2,5.1,3.5,8.8,3.3c2.8-0.2,5.2-1.2,6.9-2.8v0.5V38.1z M35.3,35.2
            c-0.2,0-0.4,0-0.6-0.1v-13c0.2,0,0.4-0.1,0.6-0.1c2.5,0,4.7,3,4.7,6.6S37.8,35.2,35.3,35.2z"/>

</svg>

Edit from the comments below :
You can access each item separately, the same way <use xlink:href> does :

 <object type="image/svg+xml" data="http://epoje.es/beers.svg#cervey"></object>