改变一个svg元素的颜色从html img标签-css[重复]
我有一个svg我加载在html，它看起来像这样：
<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_1class。这可能吗？
共有1个答案
如果您可以选择在标记中加载svg，则可以执行以下操作：
<html>
...
<svg></svg>
...
</html>
然后通过CSS设置样式：
svg .g1_1 {
fill: green;
}
例如：
css lang-css prettyprint-override">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>-
我想使用这种技术并更改SVG颜色，但到目前为止我还没能这样做。我把这个放在CSS中，但我的图像总是黑色的，不管怎么样。 我的代码： null null
-
我在HTML中添加了SVG。我想做的是，当鼠标悬停在SVG上时，将其更改为淡黄色，转换为1s。 HTML中的CSS是： 超文本标记语言的内容： 猛禽。svg内容如下： 或者，我尝试使用CSS在鼠标移动期间改变颜色： 它也不能工作，因为CSS属性不能更改SVG填充颜色。 我错过了什么？我必须使用内联SVG吗？
-
我在我的网站上使用svg图标，想把它们的颜色改成红色（它们都是黑色的）。 我试着在img标签上使用css-fill属性，但它不起作用。然后我遇到了对象attr，并尝试使用svg图标，如下所示： 在这里，在对象上应用填充属性什么也不做。关于如何在不使用jQuery的情况下更改svg元素的填充属性的任何想法 JSFIDLE
-
问题内容： 我想使用这项技术并更改svg颜色，但到目前为止我还没有做到这一点。我把它放在css中，但是无论如何我的图像总是黑色的。我的代码： 问题答案： 您不能以这种方式更改图像的颜色。如果将SVG加载为图像，则无法在浏览器中使用CSS或Javascript更改其显示方式。 如果你想改变你的SVG图像，你必须用它来装载，或使用在线。 如果要使用页面中的技术，则需要Modernizr库，您可以在其中
-
我有一个SVG元素，它包含两个尺寸和位置完全相同的子元素。两者唯一的区别是它们的颜色：第一个是红色，第二个是绿色。我注意到，即使绿色的圆圈在红色的上面，你仍然可以看到在圆圈的边缘有一点颜色偏移。我有什么办法可以避免这种颜色的变化吗？ 下面是一张屏幕截图，显示了有红圈和没有红圈的情况： 这里还有我用来复制这个的小提琴。 null 欢迎任何不同的想法。
-
主要思想是，我正在寻找将SVG添加到伪元素的最佳方法，该伪元素仍然保持其颜色变化（用于悬停）。所有这些最好没有HTML，而绝对不是JS。我正在寻找一个更简单的插件类，这是他们那种只使用CSS的解决方案。 我在这里读到了一篇讨论：有没有办法在伪元素：：before或：：after中使用SVG作为内容 在这里，人们主要谈论的是将其添加为这样的内容： 内容：url（数据：图像/svg xml，xml版本