使用 js 动态修改在线 svg 背景色

使用 js 动态修改在线 svg 背景色

由于网上搜了很多相关资料,都是介绍如何通过 js 修改本地 svg 资源。不过我们要求是要修改在线 svg 资源,因此,在一顿研究之后,封装了如下组件。

js 复制代码
<template>
  <img v-if="url" class="hyl-svg-container" :src="url"/>
</template>

<script>
  export default {
    name: 'hyl-svg-container',
    props: {
      src: String,
      fill: String,
      options: {
        type: Object,
        default: () => ({})
      }
    },
    data() {
      return {
        content: '',
        url: ''
      };
    },
    watch: {
      fill: {
        handler(v) {
          if (this.content && v) {
            this.fillColor();
          }
        },
        immediate: true
      }
    },
    created() {
      this.fetchSvgSource();
    },
    methods: {
      async fetchSvgSource() {
        if (!this.src) return;
        const response = await fetch(this.src);
        const contentType = response.headers.get('content-type');
        const [fileType] = (contentType || '').split(/ ?; ?/);
		// 异常状态
        if (response.status > 299) {
          console.error('Not found');
        }
        this.url = '';
		// 非有效格式
        if (!['image/svg+xml', 'text/plain'].some(d => fileType.includes(d))) {
          console.error(`Content type isn't valid: ${fileType}`);
          this.url = this.src;
          return;
        }
        // 获取内容
        const content = await response.text();
        this.content = content;
        this.fillColor();
      },
      fillColor() {
        if (this.fill) {
          // 支持自定义填充颜色
          this.content = this.content.replace(/#([0-9a-fA-F]{6}|[0-9a-fA-F]{3})/g, this.fill);
        }
        // 转换base64
        const base64Code = btoa(this.content);
        const base64SVG = `data:image/svg+xml;base64,${base64Code}`;
        this.url = base64SVG;
      }
    }
  };
</script>

<style>
.hyl-svg-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
相关推荐
excel6 小时前
为什么在 Three.js 中平面能产生“起伏效果”?
前端
excel7 小时前
Node.js 断言与测试框架示例对比
前端
天蓝色的鱼鱼8 小时前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
codingandsleeping8 小时前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
石金龙9 小时前
[译] Composition in CSS
前端·css
白水清风9 小时前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
Ticnix10 小时前
函数封装实现Echarts多表渲染/叠加渲染
前端·echarts
用户221520442780010 小时前
new、原型和原型链浅析
前端·javascript
阿星做前端10 小时前
coze源码解读: space develop 页面
前端·javascript
叫我小窝吧10 小时前
Promise 的使用
前端·javascript