html - 试图用 CSS 填充 SVG，但不起作用

Question

我正在尝试通过 CSS 用它的颜色填充 Twitter 图标 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">

我很确定我遗漏了一些东西，但是...是什么？
这是 fiddle : 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>