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

标签 css svg

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

但是,我不知道是否可以更改 fill如果在 <img> 中引用 SVG,则为颜色标签。 - 是否可以?如果是,怎么办?

示例:这 fill示例不起作用,因为我在 img 中引用 svg标签。

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

最佳答案

您不能通过 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 - 如何通过 CSS 更改 SVG 路径的填充颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23231907/

相关文章:

css - 为什么我的 SVG 文本在 Microsoft Edge 中没有垂直居中?

javascript - 如何确定 SVG 文本框宽度,或在 'x' 个字符后强制换行?

svg - 使用SVG对带有可选文本的图像进行 mask -可以吗?

javascript - 使用 D3.JS 绘制图表

javascript - 如何调整 SVG 动画的大小?

css - 更少的 CSS 行可以获得更好的性能?

html - HTML/CSS 中的竖线

html - 缩放元素(和背景),但不缩放内容

css - 防止在 iPhone 上的导航栏品牌中拉伸(stretch) Logo

html - Bootstrap 拉柱包装