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>