Question

我有一个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_1。这可能吗？

Answer 1

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

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

然后通过CSS设置样式：

svg .g1_1 {
  fill: green;
}

一个例子：

＆＃13;

svg {
  width: 64px;
}

svg polygon {
  fill: red;
}

svg:hover polygon {
  fill: green;
}

＆＃13;

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

＆＃13;

从html img标签 - css更改一个svg元素的颜色

1 个答案: