使用 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>
相关推荐
Smile_Gently2 小时前
前端:最简单封装nmp插件(组件)过程。
前端·javascript·vue.js·elementui·vue
nihui1237 小时前
Uniapp 实现顶部标签页切换功能?
javascript·vue.js·uni-app
luckycoke8 小时前
小程序立体轮播
前端·css·小程序
一 乐8 小时前
高校体育场管理系统系统|体育场管理系统小程序设计与实现(源码+数据库+文档)
前端·javascript·数据库·spring boot·高校体育馆系统
懒羊羊我小弟8 小时前
常用Webpack Loader汇总介绍
前端·webpack·node.js
shengmeshi8 小时前
vue3项目img标签动态设置src,提示:ReferenceError: require is not defined
javascript·vue.js·ecmascript
BillKu8 小时前
vue3中<el-table-column>状态的显示
javascript·vue.js·elementui
祈澈菇凉9 小时前
ES6模块的异步加载是如何实现的?
前端·javascript·es6
我爱学习_zwj9 小时前
4.从零开始学会Vue--{{组件通信}}
前端·javascript·vue.js·笔记·前端框架
顾比魁9 小时前
XSS盲打:当攻击者“盲狙”管理员
前端·网络安全·xss