Html 设置相同SVG的样式<；对象>；不同的方式

我希望在一个页面上有一系列相同的SVG文件，并使用不同的颜色。我知道，在不使代码膨胀的情况下将SVG放入页面，并使其保持外部可设置样式的最佳方法是通过

标记

以下是我目前掌握的情况：

HTML

<object type="image/svg+xml" data="images/circle.svg" class="object-circle red" >
    <!-- fallback image in CSS -->
</object>

<object type="image/svg+xml" data="images/circle.svg" class="object-circle blue" >
    <!-- fallback image in CSS -->
</object>

SVG

<?xml-stylesheet type="text/css" href="styles.css" ?>
<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" viewBox="0 0 400 400">
  <defs>
    <style>
      .svg-circle {
        fill-rule: evenodd;
      }
    </style>
  </defs>
  <path class="svg-circle" d="M200,398.688A199.552,199. ..."/>
</svg>

.svg圆{
填充规则：偶数奇数；
}

这就是不起作用。我认为将

标记作为操作CSS中SVG的

fill

属性的目标存在问题

将

.red

选择器从样式表上取下，并将

.svg圆圈

选择器保留在适当的位置，正如预期的那样工作-将圆圈变成红色，但我希望能够在页面上使用不同的颜色

非常感谢任何帮助

如果我不能解决这个问题，我可能会求助于老式的.png sprite表单。

请参阅“将SVG用作

”一节：

[…]如果您想让CSS工作，您不能在文档上使用外部样式表或

，您需要在SVG文件本身中使用

元素

---

因此，似乎不可能通过CSS从对象的“外部”为

对象内部的SVG元素设置样式。
正如CBroe所说，这是设置外部对象样式的问题。您可以通过JS访问它并对其进行更改，但我怀疑这是否理想，并且存在确保首先加载它等问题

然而，我不相信这是你所说的最好的方法，除非有其他要求（例如没有javascript或LIB，它必须是外部的，但是如果你支持js，你仍然可以通过Snap-load方法加载它）

您可以简单地使用defs/use语句。为了简洁起见，我刚刚用了一个圆，但是你可以有一个更复杂的路径，或者其他什么



.svg圆{
填充规则：偶数奇数；
填充：“红色”；
}
我也处于同样的困境，但我意识到按照当前规范，这根本不可能，因为SVG文档存在于它们自己的DOM中，与主文档分离，类似于iFrame（请参阅）。然而，这并不意味着我们暂时不能绕过这个限制

由于SVG文件是纯文本文件，我想为什么不使用JavaScript来呈现它（因为问题没有明确说明JS不能使用）。以上面的SVG圆圈为例，函数如下所示：


//渲染SVG圆
//可选的oStyles={selector:style[，…]}
函数renderCircle（oStyles）{
var sId=（'svg-'+performance.now（））.replace（'.'，''），
sCss=“”，
sSel；
如果（！oStyles）oStyles={}；
for（oStyles中的var i）{
//选择器句柄组
sSel=''；
i、 拆分（/*，*/）.forEach（函数）{
sSel+='#'+sId+'+s+'，'；
});
sSel=sSel.slice（0，-1）；
sCss+=sSel+'{'+oStyles[i]+'}'；
}
返回“”+
'' +
'' +
'' +
'' +
'' +
'';
}
document.getElementById（'canvas'）.innerHTML=renderCircle（）；
document.getElementById（'canvas'）.innerHTML+=renderCircle（{.svg circle'：'fill:blue'}）

<?xml-stylesheet type="text/css" href="styles.css" ?>
<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" viewBox="0 0 400 400">
  <defs>
    <style>
      .svg-circle {
        fill-rule: evenodd;
      }
    </style>
  </defs>
  <path class="svg-circle" d="M200,398.688A199.552,199. ..."/>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" viewBox="0 0 400 400">
  <defs>
    <style>
      .svg-circle {
        fill-rule: evenodd;
        fill: 'red';
      }
    </style>
    <circle id="myDefsCircle" class="svg-circle" r="20" cx="100" cy="100"/>
  </defs>

   <use x="10" y="0"   xlink:href="#myDefsCircle" style="fill:red"/>
   <use x="10" y="50"  xlink:href="#myDefsCircle" style="fill:blue"/>
   <use x="10" y="100" xlink:href="#myDefsCircle" style="fill:green"/>
</svg>


document.addEventListener("DOMContentLoaded", function() {
  //attribute name
  const ATTR_NAME = "data-src";
  //base64 encoded brocken image icon
  const ERROR_PLACEHOLDER =
    "<img src='data:image/gif;base64,R0lGODlhEQATAPcAAFKyOVGxOlOxPFSyPFSzPFSyPVSyPlWyPlWyP16kTViyRFmzRVm0RV+1T2GlUGKmUWG2U2K0VGO2V2e6UmW3Wm27X3C/XWyrYHKsaXW7ZHqwbHe7dnTAYnfBcH3EcISGhIWGhIWGhYeFh4aGhoeGh4aIhY6NjpORlJOSlJSSlJSSlZWTlZiYl5qYmpuZm5ubnp6cn5+dn4SqgIqqi56eoaGfoaGhoaKho6Kio6Oio6OhpKKipKShpKSjpKSipaSjpaajpqSlqqilqKmoqaysrL+/v4TEhY/DnpLEpJTEp5vLqaXGsaDJta3FvaXKvafKv7zhs8HjuMHjucfmv8bnv6jLwrDNz7zbyrXP17bO27jP3b3V373R5MfHyMnIycrJy8rKys3MzcTL38LP3MfO3cvR3tTW09DQ1NXV19TU2dDU39jY2dra29nd2N3d397e38rlx9jr2sfQ4cjQ4czT4crT58/X58HT6cLT6sTU6MPR7cPT7MPT7cTT78vV6dba49Tc7MXT8MXT8cbU8cbU8sfU8sbV8sfV8sfU88jW8snX88rY88vY88zZ8svY9MzZ9Mza9M3a9c3b9c7b9c3b9s7b9s/c9tDc8tPe9dPf9tDd+NHe+NPf+NLf+dvg6tvi8dXh+Nbi+Nbi+dfi+djj+drk+eDg4OHg4OHh5+Xl5uLi6Orq6uzs7OTn8eXp8ers9OHq++Tr+uXs+Obs++ft++fu++Tr/OTs/OXs/Ofu/enu+eju++jv++jv/enw/O3y/fT09Pb79PP3//r6+vr6+/v9+/r7/Pn7/vv8/vz8/Pz8/f3//P7//fz9/v79//3+//7+//7//////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAAAAAAALAAAAAARABMAAAj+AGsAEUKwIEEeLdwQk8YwxxlVqCJKVJXGBZE3yhr+6YULly1bt3Dl8gTDS5c1GXHQIcVpVC1epVraobHKFBg2xnDI6cQp1jNpu0BtqvMizKkiQ9DoFDUrGkNptDT5CaLjh48YKXT6Ooasa7NYjy59auXqVZoVOkFlWrt2kiNLoUqVgqVmxQ45lQwZOsT3UCJFixgx4kTmxF1KgxIPIsRY8SBJgL7clZSYECI+d/YUIjRIEKZf0u5GGtSHixUnTJ5gwROokSyGdyHp0ZIkggIGDTZUyaMLWjJgsbMggYBgQIEDCyrEcSYtVQ8cc7YckXCggAEDAiZMCSZNWBkUN8ZKKKEw4LqBABakFJMG54oYFTaWdABAoH4ADlCkLaPiwUgTFCzIcIEDBD6QQRTSDNOGBglgMIMJIowQwgcUlmAGM9KwksKEIZAgQkAAOw==' >";
  let target = document.querySelectorAll(`[${ATTR_NAME}]`);
  //unsorted list
  let _filesList = [];
  target.forEach(function(item) {
    _filesList.push(item.getAttribute(ATTR_NAME).replace(/\\/g, "/"));
  });
  //sorted list
  let filesList = _filesList.filter(function(item, pos) {
    return _filesList.indexOf(item) == pos;
  });
  //ajax request
  filesList.forEach(function(item) {
    let ajax = new XMLHttpRequest();
    ajax.open("GET", item, true);

    ajax.onload = function() {
      document.querySelectorAll(`[${ATTR_NAME}="${item}"]`).forEach(item => {
        if (this.status >= 200 && this.status < 400) {
          // Success!
          item.innerHTML = this.response;
        } else {
          // Error!
          item.innerHTML = ERROR_PLACEHOLDER;
        }
      });
    };

    ajax.send();
  });
});

<div class="icon" data-src="icon.svg">

.icon path{
  fill:#000;
}