試圖用CSS填充SVG，但不能正常工作

我想通過CSS填充Twitter的圖標SVG。我之前做過，我在其他一些地方做過，但由於某種原因，它停止了工作。試圖用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/

來源

2016-05-13 borbs

IMG標籤嵌入其並無持有任何decendants。這就是爲什麼你的CSS不起作用。 –

當我將svg數據設置爲src屬性時，我不認爲你可以用css來設計它，你必須直接嵌入「 chiliNUT

不要讓圖像的src，直接

.svg path { 
 
\t 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>

來源

2016-05-14 00:04:12 chiliNUT

試圖用CSS填充SVG，但不能正常工作

回答

相關問題