资料

微信小程序开发之SVG的使用

操作步骤

1.下载svg或者是制作了svg

目前，我是直接从网上copy了一段svg

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="lds-ellipsis">
    <circle cx="84" cy="50" r="0" fill="#f3b72e">
        <animate 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"></animate> 
        <animate 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"></animate>
    </circle> 
    <circle cx="43.1099" cy="50" r="10" fill="#E8574E">
        <animate 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"></animate> 
        <animate 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"></animate>
    </circle> 
    <circle cx="16" cy="50" r="7.9735" fill="#43A976">
        <animate 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"></animate> 
        <animate 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"></animate>
    </circle> 
    <circle cx="84" cy="50" r="2.0265" fill="#304153">
        <animate 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"></animate> 
        <animate 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"></animate>
    </circle> 
    <circle cx="77.1099" cy="50" r="10" fill="#f3b72e">
        <animate 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"></animate> 
        <animate 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"></animate>
    </circle>
</svg>

2.获取相应的svg代码

我是直接copy了svg代码，这一步可以直接跳过
svg代码获取地址：svgomg
先将svg格式文件上传，

image.png
上传成功之后，会直接显示出svg图像，点击MARKUP获取该svg代码
image.png

3.将SVG代码转码为Base64编码格式

由于微信小程序的限制，我们不能像在web中一样直接使用SVG，只能是通过css，设置背景图片的方式来设置。因此我们先要把优化后的SVG转化为Base64格式。
SVG代码转码为Base64编码格式地址：Encode SVG SCSS

image.png
主要使用中间红框部分，将我们获取的svg代码复制进红框内，输入之后，直接发生变化，变成background-image形式的：
image.png

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='%23f3b72e'%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 ");

注意：如果你是使用svgomg获取的svg代码的，在这一步的时候，会在background-image中出现一些无效代码，需要删除后才能使用
例如：

//这一串都是无效信息，直接删除后svg才能使用
 Open SVG Paste markup Demo Contribute About Powered by the incredible SVGO 438 bytes → 411 bytes 93.84%25

image.png

3.在微信小程序中的使用

效果图：

login.gif

使用：

//wxml
  <view class="wait icon"></view>

//wxss
.icon {
    display: inline-block;
    width: 50rpx;
    height: 50rpx;
  }

  .wait{
    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='%23f3b72e'%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%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/circle%3E%3Ccircle cx='43.11' 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%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/circle%3E%3Ccircle cx='16' cy='50' r='7.973' 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%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/circle%3E%3Ccircle cx='84' cy='50' r='2.026' 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%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/circle%3E%3Ccircle cx='77.11' 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%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/circle%3E%3C/svg%3E");
  }