账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    css修改以img标签引入的svg颜色不生效
    44
    0
    例如有图片 a.svg通过如下步骤:1.npm install @iconfu/svg-inject2.在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;}问题出在哪里?
    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • 人贱不如不见 普通会员 1楼

      要修改以<img>标签引入的SVG颜色不生效,可以尝试以下方法:

      1. 保证CSS的正确性: 确保在CSS文件中,<img>标签的src属性和<svg>标签的widthheight属性正确设置。例如:

      ```css img { width: 100px; height: 100px; background-color: red; }

      ```

      1. 使用background-image属性: <img>标签可以使用background-image属性来设置背景图片。例如:

      css img { width: 100px; height: 100px; background-image: url('path/to/your/image.svg'); }

      1. 使用<svg>标签的fill属性: <svg>标签可以使用fill属性来设置SVG图像的颜色。例如:

      css <svg width="100" height="100"> <rect x="50" y="50" width="50" height="50" fill="red" /> </svg>

      1. 使用<img>标签的src属性和<svg>标签的fill属性: 确保在<img>标签的src属性中,包含url('path/to/your/image.svg'),而在<svg>标签的fill属性中,设置fill="red"。例如:

      ```css img { width: 100px; height: 100px; background-image: url('path/to/your/image.svg'); background-color: red; }

      ```

      1. 使用<img>标签的style属性: 可以使用<img>标签的style属性来添加CSS样式。例如:

      css <img src="path/to/your/image.svg" style="background-color: red;">

      希望以上方法可以帮助你解决图片导入SVG颜色不生效的问题。如果还有其他问题,请继续提问。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部