微信小程序06：svg的使用
资料
操作步骤
1.下载svg或者是制作了svg
目前，我是直接从网上copy了一段svg
<svgxmlns="http://www.w3.org/2000/svg"viewBox="0 0 100 100"preserveAspectRatio="xMidYMid"class="lds-ellipsis"> <circlecx="84"cy="50"r="0"fill="#f3b72e"> <animateattributeName="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>
<animateattributeName="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>
<circlecx="43.1099"cy="50"r="10"fill="#E8574E"> <animateattributeName="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>
<animateattributeName="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>
<circlecx="16"cy="50"r="7.9735"fill="#43A976"> <animateattributeName="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>
<animateattributeName="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>
<circlecx="84"cy="50"r="2.0265"fill="#304153"> <animateattributeName="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>
<animateattributeName="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>
<circlecx="77.1099"cy="50"r="10"fill="#f3b72e"> <animateattributeName="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>
<animateattributeName="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才能使用OpenSVGPastemarkupDemoContributeAboutPoweredby the incredibleSVGO438bytes →411bytes93.84%25
image.png
3.在微信小程序中的使用
效果图：
login.gif
使用：
//wxml<viewclass="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");}
扫码体验案例
