从html img标签更改一个svg元素的颜色 - css [重复]答案

【问题标题】：Change the color of one svg element from html img tag - css [duplicate]从html img标签更改一个svg元素的颜色 - css [重复]
【发布时间】：2017-03-04 08:22:27
【问题描述】：

我有一个在 html 中加载的 svg，它看起来像这样：

<img src="assets/img/big_layout.svg" alt="Line Overview" class="line_overview">

实际的 svg 文件如下所示：

<svg x="0" y="0" width="1466" height="825" viewBox="0 0 1466 825" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
style="display: block;margin-left: auto;margin-right: auto;">
<defs>
<!-- SOME STYLES I've REMOVED -->
</defs>
<path fill-rule="evenodd" d="M0,0L1466,0l0,825L0,825L0,0Z" class="g1_1" />
<path fill-rule="evenodd" d="M0,0L1466,0l0,825L0,825L0,0Z" class="g1_1" />
<path fill-rule="evenodd" d="M187,21l195,0l0,195l-195,0L187,21Z" 
// LOADS MORE PATHS!!!!

我希望能够从父 html 更改此 svg 中的一些样式，例如将fill: green 添加到.g1_1 类。这可能吗？

【问题讨论】：

这可能对您有帮助吗？ stackoverflow.com/questions/10139460/…
实际上有an hack 涉及:target 选择器和svg 本身内部设置的不同CSS 规则。然后，您只需将 url 的哈希标识符更改为某个已定义的元素 (myFile.svg#myBlueGroup / myFile.svg#myRedGroup)，但这只是一个 hack，因此不值得重新打开您的问题，并且不回答欺骗 (cc @PaulLeBeau）

标签： javascript html css svg

【解决方案1】：

如果您可以选择在标记中加载 svg，那么您可以执行以下操作：

<html>
...
<svg></svg>
...
</html>

然后通过 CSS 设置样式：

svg .g1_1 {
  fill: green;
}

一个例子：

svg {
  width: 64px;
}

svg polygon {
  fill: red;
}

svg:hover polygon {
  fill: green;
}

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 48 48">
  <g> 
    <polygon fill="none" points="18,4 10,12 22,24 10,36 18,44 38,24 "></polygon> 
  </g>
</svg>

【讨论】：