css修改以img标签引入的svg颜色不生效

Question

例如有图片 a.svg

通过如下步骤：

1.npm install @iconfu/svg-inject
2.在main.js中引入：import '@iconfu/svg-inject'
3.页面中引入图片，并使用onload="SVGInject(this)"标注

<img class="QRcode" src="../assets/images/a.svg" onload="SVGInject(this)" width='60' height="60" alt="" />

4.css样式中：

.QRcode{
    fill: red;
}

问题出在哪里？

Answer 1

从命名上看，猜测是 <img> 加载完之后，svg-inject 库用 inline svg 替换了 <img> 标签。这个时候，原来的 .QRcode 已经不存在了。