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

标签 html css svg

我正在尝试通过 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/

最佳答案

不要让它成为 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>

关于html - 试图用 CSS 填充 SVG,但不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37220968/

相关文章:

javascript - 当我插入两个 Y 轴时,Apexchart 会留下 wrapper

javascript - 使用plunker时是否需要专门分离css和js

php - wordpress 博客文章缩略图的图像灰度

css - SVG - 试图弄清楚如何使用 svg 而不是 clipPath 来支持 EDGE

html - 如何使 div 中的文本在 HTML 中降低不透明度

javascript - 使用给定 ID 访问特定路径元素

html - 具有静态和响应宽度的两列模板

html - 如果 CSS flexbox 中的最后一行,则在第一行中填充剩余宽度

css - 使共享点网站响应

html - Facebook 时间线宽度不会改变