小程序svg颜色动态传入示例

9 阅读1分钟

import { Base64 } from "js-base64";

function getSvg(color) {

return <svg width='58' height='70' viewBox='0 0 58 70' fill='none' xmlns='http://www.w3.org/2000/svg'><g id='Frame 35227'><g id='Group 34194'><path id='Vector 1326' d='M30.6215 69.5327L2.29297 58.1439L47.2519 25.3455L57 29.3993V69.5327H30.6215Z' fill='url(#paint0_linear_393_9409)'/><g id='Group 34195'><rect id='Rectangle 4833' x='0.622803' y='27.6323' width='56.7542' height='21.5557' fill='${color}'/><g id='Rectangle 4835'><path d='M0.622803 27.6323L31.4757 45.2172L28.8094 47.1081L0.622803 29.5232V27.6323Z' fill='${color}'/><path d='M0.622803 27.6323L31.4757 45.2172L28.8094 47.1081L0.622803 29.5232V27.6323Z' fill='black' fill-opacity='0.2'/></g><g id='Rectangle 4834'><path d='M0.622803 27.6322H57.377V26.333C57.377 25.9622 57.196 25.6148 56.8922 25.4022L28.9999 5.88745L1.1076 25.4022C0.803768 25.6148 0.622803 25.9622 0.622803 26.333V27.6322Z' fill='${color}' /><path d='M0.622803 27.6322H57.377V26.333C57.377 25.9622 57.196 25.6148 56.8922 25.4022L28.9999 5.88745L1.1076 25.4022C0.803768 25.6148 0.622803 25.9622 0.622803 26.333V27.6322Z' fill='black' fill-opacity='0.2' /></g><g id='Union' opacity='0.7'><path d='M57.3771 28.5781L36.8084 42.1922L29.1904 34.2507L45.2418 17.2515L56.8928 25.4028C57.1964 25.6153 57.377 25.9613 57.3771 26.3301V28.5781Z' fill='${color}'/><path d='M57.3771 28.5781L36.8084 42.1922L29.1904 34.2507L45.2418 17.2515L56.8928 25.4028C57.1964 25.6153 57.377 25.9613 57.3771 26.3301V28.5781Z' fill='black' fill-opacity='0.2'/></g><g id='Rectangle 4832'><path d='M0.623039 27.6323V55.6118C0.623039 57.7032 2.31848 59.3986 4.40991 59.3986H52.8064L0.623039 27.6323Z' fill='white'/><path d='M0.623039 27.6323V55.6118C0.623039 57.7032 2.31848 59.3986 4.40991 59.3986H52.8064L0.623039 27.6323Z' fill='${color}' fill-opacity='0.7'/></g><g id='Rectangle 4831'><path d='M57.3772 27.6323V55.6118C57.3772 57.7032 55.6818 59.3986 53.5903 59.3986H5.19385L57.3772 27.6323Z' fill='white' /><path d='M57.3772 27.6323V55.6118C57.3772 57.7032 55.6818 59.3986 53.5903 59.3986H5.19385L57.3772 27.6323Z' fill='${color}' fill-opacity='0.4'/></g> <g id='Union_2'><path d='M50.4382 13.4146L29.1903 34.6283L18.6289 23.9262L22.1422 20.4469L29.2305 27.5025L46.9294 9.93091L50.4382 13.4146Z' fill='white' /><path d='M50.4382 13.4146L29.1903 34.6283L18.6289 23.9262L22.1422 20.4469L29.2305 27.5025L46.9294 9.93091L50.4382 13.4146Z' fill='url(#paint1_linear_393_9409)' /></g></g></g></g><defs><linearGradient id='paint0_linear_393_9409' x1='35.8032' y1='43.8796' x2='58.5225' y2='62.2487' gradientUnits='userSpaceOnUse'><stop stop-color='#E3E3E3' /><stop offset='1' stop-color='white' stop-opacity='0' /></linearGradient><linearGradient id='paint1_linear_393_9409' x1='47.1812' y1='10.0094' x2='28.3616' y2='32.5191' gradientUnits='userSpaceOnUse'><stop stop-color='${color}' stop-opacity='0.1' /> <stop offset='1' stop-color='white' /></linearGradient></defs></svg>; }

export default function svgTag(color) { return "data:image/svg+xml;base64," + Base64.encode(getSvg(color)); }