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

  • Z时代
  • 2024-02-25
  • 分类：IT

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

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

回答：

用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" 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>

以上是 vue中加载图片，不同的百分比值展示不同状态的图片 的全部内容， 来源链接： utcz.com/p/935474.html

回到顶部