Apply styles to an imported SVG [duplicate] - html

Question

This question already has answers here:
How to apply a style to an embedded SVG?
(6 answers)
Closed 7 years ago.
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;
}

Answer 1

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);
}