收藏
回答

建议image组件css支持fill

框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
小程序 需求 image 客户端 6.6.7 2.3.0

- 需求的场景描述(希望解决的问题)

    svg图标比png图标的优势在于:

        1.同一图标可指定不同尺寸的样式复用,不失真,移动端显示效果好.

        2.压缩效果好,占空间小,这样程序整体加载快,用户体验好.

现image组件中可以显示svg图标,但不足的是,同一图标无法在不同使用场景下指定不同颜色.

- 希望提供的能力

    望早日支持svg的fill样式定义.

最后一次编辑于  2018-10-23
回答关注问题邀请回答
收藏

3 个回答

  • ShinBlueCat
    ShinBlueCat
    2018-10-23

    你好,使用普通view并设置background-image是支持svg的

    2018-10-23
    有用
    回复 2
    • 治辰科技于鲁宁
      治辰科技于鲁宁
      2018-10-23

      你说的是用"data:image/"方式?

      2018-10-23
      回复
    • ShinBlueCat
      ShinBlueCat
      2018-10-23回复治辰科技于鲁宁

      不好意思 ,看错以为是要支持svg格式,颜色混合目前应该还没有支持,后面的版本会逐渐完善

      2018-10-23
      回复
  • C°
    2018-11-05

    上面的意思是用文字图标,文字图标可以指定size 改变颜色并且不失真,png都有点失真了

    2018-11-05
    有用
    回复
  • 1st刚刚👌
    1st刚刚👌
    2018-11-05

    把svg上传到阿里的iconfont,用style的color就可以改颜色

    2018-11-05
    有用
    回复 4
    • 治辰科技于鲁宁
      治辰科技于鲁宁
      2018-11-05

      我的意思是要在小程序中一个svg文件,不同场景不同颜色复用.而不是存放多个只是颜色不同的svg文件.

      2018-11-05
      回复
    • 1st刚刚👌
      1st刚刚👌
      2018-11-05

      我说的就是这个意思

      https://www.cnblogs.com/fashandian/p/6880892.html

      原理是把svg改成css,大小,颜色都可以用font-size,color改

      2018-11-05
      回复
    • 1st刚刚👌
      1st刚刚👌
      2018-11-05
      @font-face {
        font-family: 'iconfont'/* project id 365631 */
        src: url('//at.alicdn.com/t/font_365631_amyihc4j75b.eot');
        src: url('//at.alicdn.com/t/font_365631_amyihc4j75b.eot?#iefix') format('embedded-opentype'),
        url('//at.alicdn.com/t/font_365631_amyihc4j75b.woff') format('woff'),
        url('//at.alicdn.com/t/font_365631_amyihc4j75b.ttf') format('truetype'),
        url('//at.alicdn.com/t/font_365631_amyihc4j75b.svg#iconfont') format('svg');
      }
       
      .iconfont {
        font-family:"iconfont" !important;
        font-size:16px;
        font-style:normal;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
      }
       
      .icon-huanhuo:before{ content: "\e67a"; }
      <view class='iconfont icon-huanhuo' style='font-size: 25px;color: #CE1626'></view>
      <view class='iconfont icon-huanhuo' style='font-size: 10px;color: #666'></view>


      2018-11-05
      回复
    • 治辰科技于鲁宁
      治辰科技于鲁宁
      2018-11-05回复1st刚刚👌

      好的,谢谢,我研究一下.

      2018-11-05
      回复
登录 后发表内容