问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

如何设置svg的填充颜色呢？

头像
letier
    1.4k1214697

    我有一个svg，如下进行检验：

    <html>
  <div style="background-color: black;">
    <svg viewBox="0 0 10 10">
      <image xlink:href="https://gw.alipayobjects.com/zos/basement_prod/012bcf4f-423b-4922-8c24-32a89f8c41ce.svg" width="10%" height="10%"/>  
    </svg>
  </div>
</html>

    得到：
    image.png

    请问如何设置svg的颜色呢？

    前端svg
    阅读 1.9k
    1 个回答
    得票最新
    头像
    XboxYan
      18.3k93791
      ✓ 已被采纳

      你这个 svg 是外链图片，无法直接设置填充颜色

      如果是内联的，可以用fill来指定填充颜色

      或者直接用 CSS mask 的方式来设置颜色

      div{
  width: 20px;
  height: 20px;
  background: red;
  -webkit-mask: url('https://gw.alipayobjects.com/zos/basement_prod/012bcf4f-423b-4922-8c24-32a89f8c41ce.svg')
}

      image.png

      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题