收藏
回答

开发工具中不能展示SVG图片,在真机中运行也无法展示

框架类型 问题类型 操作系统 工具版本
小程序 Bug macOS 1.02.2004020

1、以上是在版本v1.02.1904090中实现的结果,svg可以正常展示

2、以上是最新版开发工具的展示结果,

svgData=data:image/svg+xml,<svg width='300' height='100' xmlns='http://www.w3.org/2000/svg'><defs><linearGradient id="orange_red" x1="0%" y1="0%" x2="0%" y2="100%"><stop offset="0%" stop-color="#fff"/><stop offset="100%" stop-color="#000"/></linearGradient></defs><path d='M0 8.25L6.25 8.25 C10.9375 8.25 12.5 8.25 18.75 8.25 C25 8.25 25 8.25 31.25 8.25 C37.5 8.25 37.5 8.25 43.75 8.25 C50 8.25 50 8.25 56.25 8.25 C62.5 8.25 62.5 5.1975 68.75 8.25 C75 11.3025 75 20.46 81.25 20.46 C87.5 20.46 87.5 9.405000000000001 93.75 8.25 C100 7.095 100 10.807500000000001 106.25 15.84 C112.5 20.8725 112.5 25.08 118.75 28.38 C125 31.68 125 30.607499999999998 131.25 29.04 C137.5 27.4725 137.5 25.8225 143.75 22.110000000000003 C150 18.397500000000004 150 14.850000000000001 156.25 14.19 C162.5 13.529999999999998 162.5 18.5625 168.75 19.47 C175 20.377499999999998 175 15.4275 181.25 17.82 C187.5 20.2125 187.5 30.36 193.75 29.04 C200 27.72 200 13.365 206.25 12.540000000000001 C212.5 11.715000000000002 212.5 21.78 218.75 25.740000000000002 C225 29.700000000000003 225 30.689999999999998 231.25 28.38 C237.5 26.07 237.5 20.5425 243.75 16.5 C250 12.4575 250 14.272499999999999 256.25 12.209999999999999 C262.5 10.147499999999999 262.5 7.672499999999999 268.75 8.25 C275 8.8275 275 9.157499999999999 281.25 14.52 C287.5 19.8825 287.5 25.905 293.75 29.7 L300 29.7' stroke-width='1' fill='none' stroke='#333'/><path d='M0 0L0 0 C0 0 0 0 300 0 L306.25 0' stroke-width='1' fill='none' stroke='rgba(51,51,51,0.2)'/><path d='M0 30L0 30 C0 30 0 30 300 30 L306.25 30' stroke-width='1' fill='none' stroke='rgba(51,51,51,0.2)'/><path d='M0 60L0 60 C0 60 0 60 300 60 L306.25 60' stroke-width='1' fill='none' stroke='rgba(51,51,51,0.2)'/><path d='M0 0 L0 8.25 L6.25 8.25 C10.9375 8.25 12.5 8.25 18.75 8.25 C25 8.25 25 8.25 31.25 8.25 C37.5 8.25 37.5 8.25 43.75 8.25 C50 8.25 50 8.25 56.25 8.25 C62.5 8.25 62.5 5.1975 68.75 8.25 C75 11.3025 75 20.46 81.25 20.46 C87.5 20.46 87.5 9.405000000000001 93.75 8.25 C100 7.095 100 10.807500000000001 106.25 15.84 C112.5 20.8725 112.5 25.08 118.75 28.38 C125 31.68 125 30.607499999999998 131.25 29.04 C137.5 27.4725 137.5 25.8225 143.75 22.110000000000003 C150 18.397500000000004 150 14.850000000000001 156.25 14.19 C162.5 13.529999999999998 162.5 18.5625 168.75 19.47 C175 20.377499999999998 175 15.4275 181.25 17.82 C187.5 20.2125 187.5 30.36 193.75 29.04 C200 27.72 200 13.365 206.25 12.540000000000001 C212.5 11.715000000000002 212.5 21.78 218.75 25.740000000000002 C225 29.700000000000003 225 30.689999999999998 231.25 28.38 C237.5 26.07 237.5 20.5425 243.75 16.5 C250 12.4575 250 14.272499999999999 256.25 12.209999999999999 C262.5 10.147499999999999 262.5 7.672499999999999 268.75 8.25 C275 8.8275 275 9.157499999999999 281.25 14.52 C287.5 19.8825 287.5 25.905 293.75 29.7 L300 29.7 L300 0Z' stroke-width='0' fill='url(#orange_red)' opacity='0.2'/></svg>

3、svg的处理方式是:svg = encodeURI(svgData).replace(/'/g, "%27");

最后一次编辑于  2020-04-24
回答关注问题邀请回答
收藏

2 个回答

  • o0o有脾气的酸奶
    o0o有脾气的酸奶
    2020-04-24

    那应该是新版工具的BUG,转成base64试试

    var t = this, fs = wx.getFileSystemManager(),
            file = `${wx.env.USER_DATA_PATH}/`+(new Date().valueOf())+'.svg',
          fileData = svgData.replace(/'/g, '"').replace(/^data:image\/svg\+xml;?([^,]+)?,?/g, '').trim()
          res = fs.writeFile({
            filePath:file,
            data: fileData,
            success(res) {
              console.log(res)
              t.setData({
                svgSrc: 'data:image/svg+xml;base64,'+fs.readFileSync(file, 'base64')
              })
            },
            fail(res) {
              console.log(res)
            }
          })
    

    若认为该回答有用,给回答者点个[ 有用 ],让答案帮助更多的人

    2020-04-24
    有用 1
    回复 4
    • xiaofoyuan
      xiaofoyuan
      2020-04-24
      这个是动态生成的svg字符串,没有保存成文件
      2020-04-24
      回复
    • o0o有脾气的酸奶
      o0o有脾气的酸奶
      2020-04-24回复xiaofoyuan
      这是存为svg文件后转为svg base64数据
      svgSrc可以直接使用在image src="{{svgSrc}}"上和background:url({{svgSrc}})里
      2020-04-24
      1
      回复
    • xiaofoyuan
      xiaofoyuan
      2020-04-24
      读取文件转换base64很棒哦,谢谢大牛了,经过测试其实还是微信自己的兼容有问题,因为这个问题发生在微信7.0.14内测版本以及华为的EMUI10.0以及以上版本,其他情况都正常的
      2020-04-24
      回复
    • o0o有脾气的酸奶
      o0o有脾气的酸奶
      2020-04-24回复xiaofoyuan
      恩恩
      2020-04-24
      回复
  • 灵芝
    灵芝
    2020-04-24

    你好,麻烦提供能复现问题的代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html

    2020-04-24
    有用
    回复 1
    • xiaofoyuan
      xiaofoyuan
      2020-04-24
      建议你们测试测试华为的EMUI10.0,以上问题发生在这个系统版本,以及微信内测版本7.0.14,其他版本正常
      2020-04-24
      回复
登录 后发表内容
问题标签