vue中加载图片，不同的百分比值展示不同状态的图片

Question

想知道，这种导入较多图片时，比如根据不同的值显示不同的电池电量电池的颜色，
是svg好还是png，
如果是svg，是直接插入不同的svg还是用代码修改同一个svg去改变，哪种比较常规或者比较好

Answer 1

用iconfont试试，iconfont图标可以通过改变color来改变图标颜色

Answer 2

1. 图片形式。多切些图，做成雪碧图，用背景定位方式实现也挺好。如果按10%递减换颜色的话，就需要10张图片。浪费资源。技术不好的话就较推荐这个了。
2. 直接引入多个svg图片。还没有第一个好用。因为你需要引入10个svg图片。增加了dom结构。浪费资源。好处就是svg图片质量很小。最不推荐这个方法。
3. 直接内嵌svg标签图片。用<svg></svg>标签引入的这种。给子元素起个id。通过js改变宽度和颜色。占用资源少，增加了少许dom。也可以控制宽度不管按百分之多少换颜色都可以实现。推荐。
4. 作为程序员，技术追求极致。那就用外部引入svg方式，极力推荐，好处就是不增加dom，且外部引入svg图片，资源占用极少。或者看我的笔记：https://segmentfault.com/n/13...

<object id="map" type="image/svg+xml" data="tuli1.svg" width="800" height="700" onload="getSvgDom()"></object>

<script>
     function getSvgDom() {
        var map = document.getElementById('map');
        var svg_document = map.contentDocument;
        var cir = svg_document.getElementById('矩形_5411')
       
        cir.setAttribute('fill', 'green')
        cir.setAttribute('width', '20%')
        cir.setAttribute('stroke', 'green')

     }
</script>