Apply styles to an imported SVG

Question

I have a database that outputs an object with an SVG referenced within it. Inside this SVG I've got an external style sheet and what I would like to do is reference the class of in this SVG imported style sheet so I can colour the icons appropriately.

At the moment it doesn't appear to recognise the class of the object at all and I wondered if this was even possible?

Alternatively, is there any way I could apply a dynamically named id or class to part of the svg code that's imported via object, which I could then reference using the stylesheet.

Here is a snippet of the HTML:

<object class="getFit" type="image/svg+xml" data="../images/well-being/imageurl">
Your browser does not support SVG</object>

The SVG:

<?xml version="1.0" encoding="utf-8"?>

<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<?xml-stylesheet type="text/css" href="../../well@york/svg-health.css" ?>
<svg version="1.2" baseProfile="tiny" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
 y="0px" width="128px" height="128px" viewBox="0 0 128 128" xml:space="preserve">
<g id="_x31_28px_boxes">
<rect fill="none" width="128" height="128"/>
</g>
<g id="Production">
<g>
    <path d="M47.9005,68.2746l-7.8831,11.5446L19.607,81.4577c-8.0373,0.6451-7.0919,12.8251,0.9781,12.1809
        l23.3208-1.8721c1.8405-0.1478,3.5156-1.12,4.5568-2.6449l6.9434-10.1685C51.7793,76.2057,48.8114,72.7493,47.9005,68.2746z"/>
    <path d="M111.0477,57.7956l-14.9185-2.9008C86.0095,31.5106,87.623,33.068,57.7699,25.3819
        c-1.2517-0.3173-2.6302-0.0971-3.7574,0.7207L37.0909,38.3789c-3.719,2.6923-0.1874,8.4495,3.8984,6.3709l16.4271-8.357
        l10.1408,2.6252c-3.2134,5.3099-0.6341,1.3988-13.1933,19.7913c-3.6807,6.4816-2.3874,11.5738,3.6894,16.2671l0.0034-0.005
        c0.106,0.0745,16.7525,10.2843,16.7525,10.2843l-9.1826,24.4947c-2.8514,7.6054,8.6288,11.7947,11.4423,4.2895l10.9522-29.2146
        c1.0273-2.7405-0.033-5.8246-2.5283-7.3541l-15.6026-9.5634l12.6636-17.919C82.588,50.1536,88.638,61.782,88.638,61.782
        c0.6839,1.2147,1.9524,2.0668,3.4475,2.1532l18.0603,1.0444C114.6242,65.2435,115.4678,58.6551,111.0477,57.7956z"/>
    <path d="M94.179,31.8982c5.9954-1.2801,9.8316-7.1943,8.553-13.1839c-1.2356-5.8638-7.077-9.8554-13.1953-8.5549
        c-5.9856,1.2878-9.8276,7.21-8.562,13.2012C82.2281,29.2015,88.0569,33.2142,94.179,31.8982z"/>
</g>
</g>
</svg>

My CSS:

@charset "utf-8";
/* CSS Document */

.getFit path, object.getFit circle
{
fill:#ff5000;
}

.eatWell path, object.eatWell circle
{
fill:#009F14;
}

.feelGood path, object.feelGood circle
{
fill:#ffc200;
}

score 0 · Answer 1 · edited May 23 '17 at 12:22

When using object the content is confined to its document.

How to apply external stylesheet to an embedded SVG?

What you are trying to do is even more complicated. but it is possible.
If each of your icons gets a css file then you can use javascript to add a stylesheet to your svg document when its loaded.

var svgobject = document.getElementsByClassName(".getFit");
for (var i=0; i<svgObject.length; i++)     
    var svgDoc = svgObject[i].contentDocument;
    var linkElm = svgDoc.createElementNS("http://www.w3.org/1999/xhtml", "link");
    linkElm.setAttribute("href", "getFitStyle.css");
    linkElm.setAttribute("type", "text/css");
    linkElm.setAttribute("rel", "stylesheet");
    svgDoc.getElementById("where-to-insert").appendChild(linkElm);
}

Hi @persijn I'm going to give this a shot and try it out. I did take a look at the question that robert-longson highlighted but I was probably just not reading it as thoroughly as I should have. — BoBFiSh, Oct 02 '15 at 12:38

Apply styles to an imported SVG

1 Answers1