将样式应用于导入的 SVG [重复]

Question

我有一个数据库，它输出一个对象，其中引用了一个 SVG。在这个 SVG 中，我有一个外部样式表，我想做的是引用这个 SVG 导入的样式表中的类，以便我可以适当地为图标着色。

目前它似乎根本无法识别对象的类别，我想知道这是否可能？

或者，有什么方法可以将动态命名的 id 或类应用于通过对象导入的 svg 代码的一部分，然后我可以使用样式表引用它。

这是 HTML 的 sn-p：

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

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>

我的 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

使用对象时，内容仅限于其文档。

How to apply external stylesheet to an embedded SVG?

您正在尝试做的事情更加复杂。 但这是可能的。
如果您的每个图标都有一个 css 文件，那么您可以在加载 svg 文档时使用 javascript 添加样式表。

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