Question

我试图通过CSS填充带有它颜色的推特图标SVG。我之前做过这个，我在其他地方做过这个，但由于某种原因，它停止了工作。

这是CSS代码：

.svg path {
fill: #55acee;
}

以下是HTML：

<img title="Twitter" class="svg" src="data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='512.002' height='512.002' viewBox='0 0 512.002 512.002'%3E%3Cpath d='M512.002 97.21c-18.84 8.355-39.082 14.002-60.33 16.54 21.686-13 38.342-33.584 46.186-58.114-20.3 12.04-42.777 20.78-66.705 25.49-19.16-20.415-46.46-33.17-76.674-33.17-58.012 0-105.043 47.03-105.043 105.04 0 8.232.93 16.25 2.72 23.938-87.3-4.382-164.7-46.2-216.51-109.753-9.04 15.515-14.222 33.56-14.222 52.81 0 36.444 18.544 68.596 46.73 87.433-17.22-.546-33.416-5.27-47.577-13.14-.01.44-.01.88-.01 1.322 0 50.894 36.21 93.348 84.26 103-8.812 2.4-18.093 3.687-27.673 3.687-6.77 0-13.35-.66-19.764-1.888 13.37 41.73 52.16 72.104 98.127 72.95-35.95 28.175-81.243 44.966-130.458 44.966-8.48 0-16.84-.496-25.06-1.47 46.487 29.806 101.702 47.196 161.022 47.196 193.21 0 298.868-160.062 298.868-298.872 0-4.554-.104-9.084-.305-13.59 20.526-14.81 38.335-33.31 52.417-54.373z' fill='%23FFF'/%3E%3C/svg%3E">

我很确定我错过了什么，但......这是什么？这是小提琴：https://jsfiddle.net/v4jw615q/

Answer 1

请勿将其设为src图片，直接嵌入

.svg path {
	fill: red !important;
}

    
<svg class='svg'
xmlns='http://www.w3.org/2000/svg' width='512.002' height='512.002' viewBox='0 0 512.002 512.002'>
<path d='M512.002 97.21c-18.84 8.355-39.082 14.002-60.33 16.54 21.686-13 38.342-33.584 46.186-58.114-20.3 12.04-42.777 20.78-66.705 25.49-19.16-20.415-46.46-33.17-76.674-33.17-58.012 0-105.043 47.03-105.043 105.04 0 8.232.93 16.25 2.72 23.938-87.3-4.382-164.7-46.2-216.51-109.753-9.04 15.515-14.222 33.56-14.222 52.81 0 36.444 18.544 68.596 46.73 87.433-17.22-.546-33.416-5.27-47.577-13.14-.01.44-.01.88-.01 1.322 0 50.894 36.21 93.348 84.26 103-8.812 2.4-18.093 3.687-27.673 3.687-6.77 0-13.35-.66-19.764-1.888 13.37 41.73 52.16 72.104 98.127 72.95-35.95 28.175-81.243 44.966-130.458 44.966-8.48 0-16.84-.496-25.06-1.47 46.487 29.806 101.702 47.196 161.022 47.196 193.21 0 298.868-160.062 298.868-298.872 0-4.554-.104-9.084-.305-13.59 20.526-14.81 38.335-33.31 52.417-54.373z' fill='#FFF'/>
</svg>

Answer 2

当“ path”元素中具有“ fill”属性时，您将无法控制外部CSS文件中的SVG样式。所以：

（嵌入svg代码）
在“路径”中删除“填充”属性
将样式添加到CSS文件中（现在可以直接将其应用于 svg元素本身）。

在使用“！important”之前，问自己：为什么我必须使用它？我是确保您会找到不这样做的合乎逻辑的方法。重要的是知道编码的原因。

试图用CSS填充SVG，但没有工作

2 个答案: