使用svg图片，动态改变图片颜色

最新推荐文章于 2024-04-23 19:35:54 发布

星辰点点点

最新推荐文章于 2024-04-23 19:35:54 发布

阅读量387

点赞数 9

文章标签：服务器前端 javascript

本文链接：https://blog.csdn.net/u014729053/article/details/134731242

版权

  getSvgStarImg(color) {
    const svgCode = `<?xml version="1.0" standalone="no"?>
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
    "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
    <svg t="1693902686610" class="icon" viewBox="0 0 1092 1024" version="1.1"
     xmlns="http://www.w3.org/2000/svg" p-id="2984"
      xmlns:xlink="http://www.w3.org/1999/xlink" 
      width="85.3125" height="80"><path d="M980.24057779 463.99006305c-63.57944888 72.66210947-176.81236909 193.16082871-176.81236908 193.1608287s18.16532117 132.00386188 29.06484412 222.22649597c4.84414096 46.02057221-30.88170566 66.00193094-70.8460719 47.8357858-76.29583254-35.7258458-192.55520819-91.43387513-218.59277207-104.1502596-26.64318521 12.11076316-143.50818137 67.21317197-220.40963442 102.9381946-40.56998676 17.55970066-76.29583254-1.81686155-72.05731294-47.8357858 10.29390161-90.22263409 29.06484412-221.62087546 29.0648433-221.62087545S165.20876755 536.65134854 101.02452212 463.98923908c-23.00946213-26.64318521-7.87059558-64.1850694 36.93708765-70.84607108 92.03949563-16.3492836 234.33643598-42.38684829 234.33643598-42.38684829s78.11187095-134.42634394 127.15972092-216.77673533C526.70657322 83.72131653 545.47751489 89.77669852 548.50561746 90.98793955c8.47704007 2.42248206 21.79904507 12.71556052 38.75394919 42.99164483 48.4414063 82.35121453 125.34285938 216.77755929 125.34285937 216.7775593s140.48090195 26.03838867 231.30915738 42.38684829c44.20288586 6.66100251 58.73530793 44.80850637 36.33146632 70.84607107z" 
      fill="${color}" p-id="2985"></path></svg>`;
    const backgroundImage = `url('data:image/svg+xml,${encodeURIComponent(svgCode)}')`;
    return backgroundImage
  }

使用：<View style={{backgroundImage: this.getSvgStarImg('#bfbfbf')}} />