代码之家 › 专栏 › 技术社区 › á´á´É´á´ÊÉªá´á´Éªs

为什么我不能用color CSS属性给这个SVG上色

svg css

-3

á´á´É´á´ÊÉªá´á´Éªs · 技术社区 · 5 年前

我正在寻找一种方法来改变SVG图标的颜色(没有 fill 因为IE11)不支持它,我看到Github使用 color

我从Github得到了这个SVG(基本上是星型按钮)。如果我在Github上使用开发工具检查它,然后设置一个颜色( color: red )在上面,我可以让它变色。

但是,如果我在我的页面上复制它并尝试同样的操作,它将不起作用:

.octicon-star {
  color:red;
}

<svg class="octicon octicon-star v-align-text-bottom" viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M14 6l-4.9-.64L7 1 4.9 5.36 0 6l3.6 3.26L2.67 14 7 11.67 11.33 14l-.93-4.74L14 6z"></path></svg>

有什么想法吗?

1 回复 | 直到 5 年前

Maharkus zok 5 年前

你在找 fill: CurrentColor . 它改变了 fill 根据的值 color . Here's 一篇关于CSS技巧的文章。

编辑:这当然有用 填满 也是,但这是github使用的方法。

.octicon-star {
  color: green;
}

svg {
  fill: currentColor;
}

<svg class="octicon octicon-star v-align-text-bottom" viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M14 6l-4.9-.64L7 1 4.9 5.36 0 6l3.6 3.26L2.67 14 7 11.67 11.33 14l-.93-4.74L14 6z"></path></svg>

推荐文章

Aaron · 使用feTurbulence SVG标记模拟Musgrave纹理动画

1 年前

Michael Lynch · 如何使用包来构建导入SVG的React组件库?

1 年前

Chris Barr · 为什么带有<defs>的SVG在转换为<symbol>时会丢失渐变?

1 年前

HTML · 如何使用css使任何SVG图像灰度化?

2 年前

JohnB · 将<svg>资源放在</body>之后合法吗?

2 年前

Hashim Aziz · 为什么使用SVG Core设置FontAwesome在默认情况下会禁用这些选项?

2 年前

Sougata Mukherjee · 如何同时悬停svg和文本

2 年前

Basj · 即使距离为3像素,也能检测到SVG线上的点击

2 年前

jana · 在带有javascript的svg中的锚点中插入rect元素不起作用

2 年前

Developer · 如何在SVG图例中将文本悬停在rect或legendcells上

2 年前