收藏
回答

background-image显示svg渲染无效 直接写在css里面却可以?

<view style="background-image: url('{{imgurl}}');width:{{size}}rpx;height:{{size}}rpx;border:1rpx solid red"></view>

var base64 = this.svgToEncodeURL(basestr)

this.setData({

imgurl:base64

})


在onload里给imgurl赋值无效 图片还是空白

.test{

background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='xMidYMid' class='lds-ellipsis'%3E %3Ccircle cx='84' cy='50' r='0' fill='%23ccccccc'%3E %3Canimate attributeName='r' values='10;0;0;0;0' keyTimes='0;0.25;0.5;0.75;1' keySplines='0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1' calcMode='spline' dur='1.7s' repeatCount='indefinite' begin='0s'%3E%3C/animate%3E %3Canimate attributeName='cx' values='84;84;84;84;84' keyTimes='0;0.25;0.5;0.75;1' keySplines='0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1' calcMode='spline' dur='1.7s' repeatCount='indefinite' begin='0s'%3E%3C/animate%3E %3C/circle%3E %3Ccircle cx='43.1099' cy='50' r='10' fill='%23E8574E'%3E %3Canimate attributeName='r' values='0;10;10;10;0' keyTimes='0;0.25;0.5;0.75;1' keySplines='0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1' calcMode='spline' dur='1.7s' repeatCount='indefinite' begin='-0.85s'%3E%3C/animate%3E %3Canimate attributeName='cx' values='16;16;50;84;84' keyTimes='0;0.25;0.5;0.75;1' keySplines='0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1' calcMode='spline' dur='1.7s' repeatCount='indefinite' begin='-0.85s'%3E%3C/animate%3E %3C/circle%3E %3Ccircle cx='16' cy='50' r='7.9735' fill='%2343A976'%3E %3Canimate attributeName='r' values='0;10;10;10;0' keyTimes='0;0.25;0.5;0.75;1' keySplines='0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1' calcMode='spline' dur='1.7s' repeatCount='indefinite' begin='-0.425s'%3E%3C/animate%3E %3Canimate attributeName='cx' values='16;16;50;84;84' keyTimes='0;0.25;0.5;0.75;1' keySplines='0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1' calcMode='spline' dur='1.7s' repeatCount='indefinite' begin='-0.425s'%3E%3C/animate%3E %3C/circle%3E %3Ccircle cx='84' cy='50' r='2.0265' fill='%23304153'%3E %3Canimate attributeName='r' values='0;10;10;10;0' keyTimes='0;0.25;0.5;0.75;1' keySplines='0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1' calcMode='spline' dur='1.7s' repeatCount='indefinite' begin='0s'%3E%3C/animate%3E %3Canimate attributeName='cx' values='16;16;50;84;84' keyTimes='0;0.25;0.5;0.75;1' keySplines='0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1' calcMode='spline' dur='1.7s' repeatCount='indefinite' begin='0s'%3E%3C/animate%3E %3C/circle%3E %3Ccircle cx='77.1099' cy='50' r='10' fill='%23f3b72e'%3E %3Canimate attributeName='r' values='0;0;10;10;10' keyTimes='0;0.25;0.5;0.75;1' keySplines='0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1' calcMode='spline' dur='1.7s' repeatCount='indefinite' begin='0s'%3E%3C/animate%3E %3Canimate attributeName='cx' values='16;16;16;50;84' keyTimes='0;0.25;0.5;0.75;1' keySplines='0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1' calcMode='spline' dur='1.7s' repeatCount='indefinite' begin='0s'%3E%3C/animate%3E %3C/circle%3E %3C/svg%3E")

}

但是在css里面直接写可以正常用,不知道这是什么原因(我setData赋值的imgurl与css里面的url是同样的)

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

3 个回答

  • 面条君
    面条君
    2020-11-23

    红点的地方用引号包起来试试

    2020-11-23
    有用 2
    回复 11
    • dejavu🐼
      dejavu🐼
      2020-11-23
      你好 本来是有引号的 加上去并没有用 如果把imgurl换成网络url的图片就可以渲染了 不知道是什么原因 是不是base64的就不能用setData动态渲染
      2020-11-23
      回复
    • 面条君
      面条君
      2020-11-25回复dejavu🐼
      setData设置数据的时候有大小限制,base64太大确实不行
      2020-11-25
      回复
    • dejavu🐼
      dejavu🐼
      2020-11-26回复面条君
      那么请问如果我要在小程序端主动改变svg的颜色还有什么别的出路吗
      2020-11-26
      回复
    • 面条君
      面条君
      2020-11-26回复dejavu🐼
      SVG大吗?如果是icon一类的试试使用iconfont,改变颜色也方便
      2020-11-26
      回复
    • dejavu🐼
      dejavu🐼
      2020-11-26回复面条君
      我们的需求是icon不是固定在本地的,需要从服务器下载svg,然后根据情况去更改颜色,再转成base64,本身前面的步骤都完成了,但是最后这一步setData没用,真的很无语
      2020-11-26
      回复
    查看更多(6)
  • 理想
    理想
    2020-12-25

    关于svg,我今天是在wxml显示图片,直接<image src="编码后的svg内容",可以,如果在js里data写svgImg="svg内容",wxml 里<image src="{{svgImg}}",就不行,我已经用前面的方法了。

    不过遇到另外一个问题,

    <view class="a">

    <image class="b"/>

    </view>

    这时样式里,.a{bottom:10rpx;},.b{bottom:10rpx;},发现a显示的位置大概在bottom220左右的位置,要要写成 .a{bottom:-225rpx;},才大概跟b距离底部差不多,很奇怪

    b是背景,a是图片,现在a写-225rpx在IDE显示在中间了,但是手机上调试就歪在一边,这主要是怕在其他机型上不正常,因为我只能在一台机子上调整。

    2020-12-25
    有用
    回复
  • Cjiang
    Cjiang
    2020-11-23

    请具体描述问题出现的流程,并提供能复现问题的简单代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)。

    2020-11-23
    有用
    回复 10
    查看更多(5)
登录 后发表内容
问题标签