StarFire_xm
  • 文章
  • 粉丝
  • 评论

小程序使用svg图片变色

2023-12-18 14:54:240 次浏览0 次评论技能类型: 小程序
//图标
const xianshiqiangImg = (color = '#FF7A17') => {
  const svgXml = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 24" class="design-iconfont">
  <g stroke="${color}" fill="none" fill-rule="evenodd">
    <g stroke-width="2.45338605">
      <path d="M3.79998637,0 L2.36836785,13.4253543 C2.23125865,14.7111295 1.26988111,15.7562402 0,16 L0,16 L0,16" transform="translate(41.3156 4)"/>
      <path d="M0.89535215 4.50835771L5.57330376 4.50835771" transform="translate(41.3156 4)"/>
      <path d="M0.28218458 9.4151298L5.57330376 9.4151298" transform="translate(41.3156 4)"/>
      <path d="M6.66346304,4.57201433 L7.19736643,4.57201433 C7.91015003,4.57201433 8.566907,4.18558119 8.91307217,3.56250002 L9.20966253,3.02865118 C9.73888589,2.07607378 10.7429474,1.48528802 11.8326635,1.48528802 L12.3783988,1.48528802 C13.385245,1.48528802 14.2915841,2.09566688 14.6701071,3.02865118 L14.7993398,3.34718423 C15.0997398,4.08761091 15.8190205,4.57201433 16.6180649,4.57201433 L17,4.57201433 L17,4.57201433" stroke-linejoin="round" transform="translate(41.3156 4)"/>
      <path d="M14.947182,13.7916859 C14.3741468,15.1312183 13.0575546,16 11.6006001,16 L8.30511744,16 C7.76313036,16 7.32376302,15.5606327 7.32376302,15.0186456 C7.32376302,14.9831026 7.32569398,14.9475859 7.32954735,14.9122524 L7.77683157,10.8108874 C7.99192176,8.83862156 9.65760054,7.34472127 11.6415603,7.34472127 L14.1469236,7.34472127 C14.6889107,7.34472127 15.128278,7.78408861 15.128278,8.32607569 L15.128278,8.80081993 C15.128278,9.68486923 14.6034758,10.4845655 13.7924426,10.8363727 L12.3293007,11.4710493 L12.3293007,11.4710493" transform="translate(41.3156 4)"/>
    </g>
    <path d="M0,17.4791307 L1.80379382,1.7897909 C1.86182685,1.28502154 2.28915522,0.904007907 2.79724965,0.904007907 L6.43361861,0.904007907 L6.43361861,0.904007907 L4.25949486,7.34472127 L5.67422657,7.34472127 L3.77184275,15.0129333" stroke-width="2.45338605" stroke-linejoin="round" transform="translate(3 4)"/>
    <path d="M11.3148279,16.4508298 C9.74599057,16.4508298 8.47419665,15.1790359 8.47419665,13.6101986 C8.47419665,13.5420962 8.47664572,13.4740158 8.48153911,13.4060895 L9.31532099,1.83215449 C9.35300126,1.30910531 9.78833153,0.904007907 10.3127362,0.904007907 L16.9974185,0.904007907 L16.9974185,0.904007907 L16.1406172,7.53938839 C16.0762301,8.03802523 15.6516278,8.41132543 15.1488511,8.41132543 L9.10973644,8.41132543 L9.10973644,8.41132543" stroke-width="2.45338605" stroke-linejoin="round" transform="translate(3 4)"/>
    <path d="M13.0741622,8.44170963 L13.7896574,13.2110921 C13.9968498,14.592205 14.8454906,15.7937628 16.0778316,16.4508298 L16.0778316,16.4508298 L16.0778316,16.4508298" stroke-width="2.45338605" stroke-linejoin="round" transform="translate(3 4)"/>
    <path stroke-width="2" stroke-linecap="square" d="M9.81559768 4.5L15.8155977 4.5" transform="translate(3 4)"/>
    <path stroke-width="2" stroke-linecap="square" d="M20.8155977 8.5L24.7510511 8.5" transform="translate(3 4)"/>
    <path stroke-width="2" stroke-linecap="square" d="M28.8164654 3.02865118L36.035925 3.02865118" transform="translate(3 4)"/>
    <path stroke-width="2" stroke-linecap="square" d="M13.8155977 12.5L15.8155977 12.5" transform="translate(3 4)"/>
    <path d="M19.843286,15.180842 L21.2280794,2.37775431 C21.2829929,1.87005225 21.7116177,1.48528802 22.2222808,1.48528802 L25.9494494,1.48528802 L25.9494494,1.48528802 L24.5183387,14.2918986 C24.4617766,14.798057 24.0338336,15.180842 23.5245246,15.180842 L19.843286,15.180842 L19.843286,15.180842 Z" stroke-width="2.45338605" stroke-linejoin="round" transform="translate(3 4)"/>
    <path d="M34.7611748,0 L33.5873482,14.1651681 C33.5014167,15.2021467 32.6347129,16 31.59418,16 L28.1621906,16 L28.1621906,16" stroke-width="2.45338605" stroke-linejoin="round" transform="translate(3 4)"/>
    <path stroke-width="2.45338605" stroke-linejoin="round" d="M30.622725 7.03629664L28.8164654 12.4462697" transform="translate(3 4)"/>
  </g>
</svg>
`;
  return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svgXml)}`;
};

xianshiqiangImgs=xianshiqiangImg(); 

<image class="icon" src="{{xianshiqiangImgs}}" />

    发表

    还没有评论哦,来抢个沙发吧!