跳到主要内容

动态生成自定义svg的解决方法

· 阅读需 2 分钟

SVG 格式的文件，是可缩放的矢量图像文件，它根据设定的一些参数和曲线直线等算法来渲染出来图片，所以它能很容易去自定义图片的样式。

当然在前端中，svg 运用到 html 上是更加的方便，它可以直接使用标签的形式来被渲染出来，标签中的一些属性等来决定渲染的 svg 的样式，那么根据这样的一个特点，我们就可以方便的对不同的 svg 设置不同的样式等。

1. 如何渲染自定义的 svg 图片来运用到 js 的渲染中​

使用 btoa 来构建 base64 的 svg 图片。

下面来封装一个函数，简单的传入一个 svg 的 fill 属性支持的颜色字符串，来生成不同颜色的 svg 图片。

//genSVG.js
//这里的svg的iconfont中的
export default (color) => {
    var svg = `
    <svg fill="${color}" t="1692813506367" class="icon" viewBox="0 0 1064 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1440" width="200" height="200"><path d="M512 0c282.781538 0 512 229.218462 512 512S794.781538 1024 512 1024s-512-229.218462-512-512S229.218462 0 512 0z"  p-id="1441"></path></svg>
    `;

    // 转换为data URI
    var svgDataURI = "data:image/svg+xml;base64," + btoa(svg);

    return svgDataURI;
};

2. 总结​

很多时候会认为图片这种非代码的不能去动态的修改，其实可以换一个思路就是去构建 base64 编码来实现。