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

Neoo1984
  • 53

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

回复
阅读 440
2 个回答

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

  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>
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏