Question

我知道如果原始SVG添加到HTML页面，我们可以使用CSS更改SVG路径的fill颜色。

但是，如果在fill标记内引用了SVG，我就不知道是否可以更改<img>颜色。 - 可能吗？如果是这样，怎么样？

示例：此fill示例无法正常工作，因为我在img代码中引用了svg。

<html>
    ...
    <style>
        #foo{
           fill: #ccc;
        }
    </style>
    <body>
        <img id="foo" src="myicon.svg" />
    </body>
</html>

Answer 1

您无法通过CSS对SVG影响源图像是另一个文件。你只能在文件本身中产生影响，或者将SVG内联在HTML中，而不是风格会让人感到震惊。

SVG内联示例：

<!DOCTYPE html>
<html>
<body>
<style>
  #foo{
    fill: #ccc;
  }
</style>

<svg id="foo" width="300" height="200">
  <polygon points="100,10 40,180 190,60 10,60 160,180"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>

</body>
</html>

如何通过CSS更改SVG路径的填充颜色

1 个答案: