更新时间:2023-11-26 23:27:52
如果在svg中指定了笔触,我将无法覆盖它.
示例:错误的svg
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="16" viewBox="0 0 20 16">
<g fill="#88AACC" fill-rule="evenodd" stroke-linecap="round" stroke="#555555" stroke-linejoin="round" stroke-width="2">
...
</g>
</svg>
删除fill="#88AACC"
&然后,可以从SVG本身中stroke="#555555"
对其进行控制,如您所愿.
.some-class {
fill: red;
stroke: blue;
}
I want to change the color of a custom svg icon on clicking a button
<ion-item>
<ion-icon src="../../assets/img/icon-qr.svg"></ion-icon>
<ion-label>Qr Scan</ion-label>
</ion-item>
I was unable to override an svg stroke or fill if it was specified in the svg.
Example: bad svg
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="16" viewBox="0 0 20 16">
<g fill="#88AACC" fill-rule="evenodd" stroke-linecap="round" stroke="#555555" stroke-linejoin="round" stroke-width="2">
...
</g>
</svg>
Removing fill="#88AACC"
& stroke="#555555"
from within the SVG itself then allowed it to be controlled from CSS as you'd expect.
.some-class {
fill: red;
stroke: blue;
}