svg动态图片

<img :src="imageSrc">

let  imageSrc = 'data:image/svg+xml;utf8,' + encodeURIComponent('<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1566356017960" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7530" xmlns:xlink="http://www.w3.org/1999/xlink" width="68" height="45"><defs><style type="text/css"></style></defs><path d="M348.006 715.531h-174.83c-60.347 0-109.269-48.921-109.269-109.269v-349.66c0-60.347 48.921-109.269 109.269-109.269h677.466c60.347 0 109.269 48.921 109.269 109.269v349.66c0 60.347-48.921 109.269-109.269 109.269h-174.83l-163.903 174.83-163.903-174.83z" fill="' + fillColor.backgroundColor + '" p-id="7531"></path></svg>')

这样imageSrc 就能根据传入的颜色不同显示不同的样式了

如果传入红色那显示的效果是这样的