微信小程序加载svg数据图片

微信小程序如何加载动态的svg数据图片？

尝试过多种方式都不可行：

1. 在使用
2. 在src以base64方式使用

解决方案和步骤

通过远程服务获取svg图片数据，使用小程序背景渲染方式进行展现。

1. 获取svg数据

http.get(`/admin/base/open/captcha?height=50&width=100&color=#000`).then(res=>{
      const bg = toSvgCssDackground(res.data.data);
      this.setData({
        captchaId: res.data.captchaId,
        svgDataBG: bg
      })
    })

/* res.data.data数据示例 */
res.data.data = "<svg xmlns='http://www.w3.org/2000/svg' width='100' height='50' viewBox='0,0,100,50'><path fill='#fff' d='M12.86 33.05L12.81 33.00L12.76 32.95Q15.79 32.51 18.98 32.62L19.12 32.76L19.01 32.65Q19.07 30.20 19.07 27.80L19.06 27.79L19.02 27.75Q19.05 25.31 19.24 22.76L19.24 22.76L19.10 22.62Q18.05 24.49 12.83 33.02ZM22.58 40.22L22.61 40.25L22.69 40.33Q21.08 40.09 19.29 40.01L19.27 40.00L19.26 39.99Q19.06 37.61 18.94 35.14L18.89 35.08L18.90 35.09Q13.49 34.82 8.77 36.23L8.92 36.38L8.91 36.37Q8.94 35.79 9.13 34.80L9.18 34.85L9.11 34.78Q10.90 31.62 14.48 25.34L14.52 25.38L14.43 25.29Q17.38 20.48 20.81 16.59L20.80 16.58L20.90 16.68Q21.75 16.47 23.43 16.21L23.34 16.12L23.41 16.19Q21.42 22.54 21.42 29.58L21.44 29.60L21.51 29.67Q21.49 31.14 21.57 32.62L21.64 32.69L22.76 32.64L22.87 32.75Q23.44 32.74 24.05 32.86L24.08 32.89L23.97 32.78Q24.18 33.86 24.45 35.81L24.51 35.87L24.39 35.75Q23.27 35.58 21.78 35.39L21.66 35.26L21.76 35.36Q22.02 37.41 22.70 40.34ZM24.42 32.58L24.33 32.49L24.26 32.42Q24.20 32.47 24.01 32.47L23.90 32.36L23.67 32.51L23.67 32.51Q23.39 30.86 23.39 29.45L23.37 29.44L23.46 29.53Q23.40 23.07 25.45 17.05L25.52 17.12L25.61 17.21Q24.70 17.33 23.26 17.71L23.35 17.80L23.37 17.82Q23.54 17.01 24.00 15.60L23.95 15.55L24.08 15.68Q22.71 15.98 20.65 16.21L20.66 16.22L20.61 16.17Q16.82 20.64 11.60 30.01L11.49 29.89L13.51 26.17L13.51 26.16Q13.27 27.37 13.00 27.94L12.94 27.88L8.47 36.89L8.41 36.82Q9.19 36.80 10.33 36.42L10.18 36.27L10.05 36.53L10.09 36.56Q10.02 37.29 9.71 38.55L9.76 38.59L9.68 38.51Q13.72 37.11 18.55 37.30L18.68 37.42L18.56 37.31Q18.64 38.30 18.83 40.28L18.77 40.21L18.86 40.31Q19.91 40.29 20.98 40.40L21.03 40.46L20.92 40.35Q21.24 41.20 21.50 42.57L21.37 42.43L21.50 42.57Q23.37 42.76 26.38 43.68L26.35 43.64L26.32 43.61Q25.39 41.54 24.47 38.27L24.40 38.19L25.84 38.65L25.83 38.63Q26.48 38.83 27.16 39.17L27.31 39.32L27.28 39.28Q26.48 36.77 26.33 35.09L26.31 35.08L26.24 35.01Q25.71 34.90 24.57 34.67L24.67 34.77L24.55 34.65Q24.31 33.34 24.31 32.47ZM16.29 32.29L16.38 32.38L16.32 32.32Q17.07 31.01 18.63 28.46L18.70 28.54L18.71 28.54Q18.60 29.38 18.56 30.34L18.54 30.31L18.60 30.37Q18.71 31.48 18.75 32.43L18.68 32.36L18.65 32.33Q18.05 32.27 17.48 32.27L17.44 32.22L17.48 32.27Q16.88 32.27 16.27 32.27Z'/><path fill='#fff' d='M53.18 40.32L53.23 40.37L53.21 40.35Q49.20 40.64 48.21 38.32L48.14 38.25L48.16 38.26Q48.91 37.30 50.47 35.51L50.46 35.51L50.43 35.48Q50.98 37.55 53.99 37.67L54.06 37.73L53.96 37.63Q57.35 37.71 58.99 36.38L59.02 36.41L59.09 36.48Q60.43 34.82 60.36 32.12L60.29 32.04L60.44 32.20Q60.30 27.15 55.51 27.38L55.32 27.19L55.43 27.30Q52.51 27.36 50.76 28.61L50.85 28.70L50.43 28.43L50.28 28.36L50.38 28.45Q50.64 25.22 50.53 22.48L50.56 22.51L50.54 22.49Q50.41 19.84 50.07 16.53L50.10 16.57L50.14 16.61Q53.72 17.48 57.53 17.37L57.54 17.38L57.54 17.38Q61.32 17.28 64.90 16.02L65.00 16.12L64.37 17.58L64.26 17.48Q63.98 18.27 63.79 19.10L63.81 19.12L63.88 19.20Q60.72 20.18 56.84 20.18L56.95 20.29L56.95 20.29Q55.47 20.26 53.99 20.11L53.89 20.01L53.87 20.00Q53.79 20.67 53.45 25.13L53.52 25.20L53.48 25.16Q54.30 24.69 56.36 24.54L56.33 24.51L56.49 24.67Q60.16 24.84 61.61 26.51L61.57 26.48L61.57 26.48Q62.99 28.05 63.25 31.89L63.24 31.88L63.15 31.78Q63.47 36.03 62.25 38.04L62.27 38.06L62.32 38.12Q60.24 39.96 56.93 40.18L56.96 40.21L56.87 40.12Q55.92 40.24 53.25 40.39ZM59.24 42.61L59.20 42.57L59.21 42.58Q62.77 42.79 64.68 41.69L64.69 41.70L64.71 41.73Q65.68 40.18 65.68 38.08L65.70 38.11L65.63 38.04Q65.67 34.99 64.71 30.88L64.74 30.90L64.76 30.92Q64.21 29.00 62.99 27.59L63.13 27.73L63.20 27.84L62.78 27.34L62.50 27.21L62.62 27.34Q62.29 26.59 61.64 25.90L61.61 25.87L61.50 25.79L61.65 25.94Q59.99 24.13 56.29 24.13L56.35 24.19L56.15 24.26L56.04 24.15Q56.23 23.69 56.42 22.58L56.41 22.58L56.33 22.50Q61.44 22.73 65.47 21.09L65.32 20.94L65.42 21.04Q65.78 19.57 66.73 16.75L66.75 16.77L64.57 17.64L64.56 17.63Q65.02 16.56 65.51 15.42L65.49 15.40L65.57 15.48Q61.63 16.83 57.52 16.90L57.57 16.96L57.57 16.95Q53.44 17.05 49.48 15.95L49.56 16.02L49.47 15.93Q50.24 20.44 50.24 24.86L50.23 24.84L50.18 24.79Q50.18 26.70 50.07 28.60L50.15 28.68L50.14 28.67Q50.39 28.85 50.96 29.15L50.90 29.09L50.91 29.11Q51.34 28.96 51.99 28.62L51.84 28.47L51.96 28.59Q51.97 29.40 51.74 30.92L51.68 30.86L51.74 30.92Q52.12 31.08 52.54 31.30L52.45 31.21L52.57 31.33Q55.23 29.47 57.10 29.47L57.12 29.49L57.09 29.46Q58.39 29.43 59.57 30.07L59.63 30.13L59.60 30.10Q60.04 31.23 60.08 32.18L59.97 32.08L60.01 32.12Q60.17 34.79 59.14 35.89L59.12 35.87L59.01 35.75Q57.74 37.07 55.49 37.30L55.38 37.19L55.47 37.28Q54.57 37.41 53.89 37.33L53.76 37.21L53.77 37.22Q52.92 37.09 52.16 36.75L52.28 36.87L52.12 36.51L51.99 36.61L51.98 36.60Q51.27 36.20 50.74 34.87L50.68 34.81L50.64 34.77Q49.44 36.31 47.76 38.44L47.72 38.40L47.65 38.32Q48.13 39.15 48.96 40.10L48.82 39.96L48.81 39.95Q49.91 41.81 52.73 42.30L52.68 42.26L52.70 42.28Q53.84 42.46 59.21 42.58Z'/><path d='M2 37 C68 32,67 20,86 15' stroke='#fff' fill='none'/><path fill='#fff' d='M71.54 32.93L71.66 33.05L71.50 32.89Q74.60 32.52 77.80 32.64L77.92 32.77L77.91 32.75Q77.82 30.15 77.82 27.75L77.74 27.67L77.74 27.67Q77.91 25.36 78.10 22.81L77.91 22.62L77.98 22.70Q76.69 24.33 71.47 32.86ZM81.48 40.32L81.41 40.24L81.45 40.29Q79.70 39.91 77.91 39.83L77.98 39.90L77.95 39.88Q77.84 37.59 77.73 35.12L77.71 35.10L77.76 35.15Q72.35 34.89 67.63 36.30L67.63 36.29L67.56 36.22Q67.83 35.89 68.02 34.90L67.91 34.78L68.04 34.91Q69.66 31.58 73.24 25.30L73.31 25.37L73.39 25.46Q76.26 20.56 79.68 16.67L79.61 16.60L79.68 16.67Q80.60 16.52 82.27 16.25L82.28 16.26L82.11 16.09Q80.37 22.69 80.37 29.73L80.28 29.64L80.25 29.61Q80.30 31.15 80.38 32.63L80.32 32.58L81.63 32.71L81.61 32.68Q82.26 32.76 82.87 32.88L82.91 32.91L82.80 32.80Q83.07 33.95 83.34 35.89L83.28 35.84L83.23 35.79Q82.07 35.58 80.59 35.39L80.54 35.35L80.47 35.27Q80.86 37.45 81.54 40.38ZM83.19 32.55L83.08 32.44L83.15 32.51Q82.93 32.41 82.74 32.41L82.74 32.40L82.28 32.32L82.31 32.35Q82.33 31.00 82.33 29.59L82.33 29.60L82.19 29.45Q82.31 23.18 84.36 17.16L84.39 17.19L84.29 17.09Q83.50 17.33 82.05 17.71L82.15 17.81L82.19 17.84Q82.30 16.96 82.75 15.55L82.85 15.65L82.72 15.52Q81.56 16.03 79.50 16.26L79.46 16.22L79.53 16.29Q75.59 20.61 70.37 29.97L70.37 29.97L72.33 26.18L72.48 26.33Q71.98 27.28 71.71 27.85L71.62 27.76L67.21 36.82L67.20 36.81Q67.82 36.63 68.96 36.25L68.99 36.28L68.98 36.65L68.85 36.52Q68.83 37.30 68.53 38.56L68.51 38.54L68.42 38.45Q72.65 37.24 77.48 37.43L77.49 37.43L77.52 37.46Q77.41 38.27 77.60 40.25L77.71 40.36L77.64 40.29Q78.72 40.30 79.79 40.42L79.83 40.46L79.85 40.48Q79.91 41.07 80.18 42.45L80.11 42.38L80.11 42.38Q82.13 42.72 85.13 43.63L85.09 43.59L85.17 43.67Q84.04 41.40 83.13 38.12L83.30 38.30L84.76 38.77L84.59 38.59Q85.25 38.80 85.94 39.14L85.96 39.17L86.03 39.23Q85.24 36.73 85.09 35.05L85.17 35.14L85.05 35.02Q84.58 34.96 83.43 34.74L83.30 34.60L83.45 34.75Q83.05 33.29 83.05 32.41ZM75.21 32.41L75.15 32.35L75.22 32.43Q75.90 31.04 77.46 28.49L77.50 28.54L77.38 28.42Q77.41 29.40 77.37 30.35L77.51 30.48L77.43 30.41Q77.50 31.47 77.54 32.42L77.56 32.44L77.43 32.31Q76.93 32.34 76.36 32.34L76.40 32.38L76.25 32.23Q75.75 32.34 75.14 32.34Z'/><path fill='#fff' d='M40.13 27.19L40.17 27.23L40.13 27.19Q40.90 27.15 42.30 27.00L42.23 26.92L42.26 26.96Q42.22 27.60 42.22 28.25L42.33 28.36L42.35 29.63L42.36 29.64Q41.51 29.63 40.67 29.71L40.63 29.66L40.54 29.58Q39.76 29.67 38.92 29.64L38.98 29.69L38.86 29.57Q36.07 35.80 32.64 40.41L32.60 40.36L32.60 40.36Q30.10 41.03 28.81 41.63L28.85 41.68L28.88 41.71Q33.02 36.03 36.06 29.75L36.04 29.72L33.31 29.61L33.42 29.73Q33.45 28.43 33.34 27.10L33.35 27.11L33.34 27.10Q35.24 27.24 37.29 27.24L37.29 27.24L39.19 23.54L39.06 23.41Q40.09 21.55 41.31 19.95L41.25 19.89L41.32 19.96Q39.74 20.10 38.14 20.10L38.19 20.14L38.14 20.09Q32.18 20.22 28.41 18.01L28.23 17.84L27.67 16.21L27.64 16.18Q27.42 15.47 27.04 14.59L26.94 14.49L27.01 14.57Q31.34 17.18 37.05 17.40L37.06 17.41L37.05 17.40Q42.08 17.53 47.22 15.55L47.30 15.62L47.30 15.62Q47.12 16.06 46.63 16.93L46.53 16.84L46.57 16.87Q43.00 21.68 40.14 27.20ZM48.19 18.27L48.21 18.29L49.21 16.28L49.19 16.26Q48.30 16.82 46.63 17.54L46.57 17.48L46.74 17.16L46.70 17.12Q46.79 16.94 46.91 16.83L47.04 16.96L46.93 16.85Q47.31 16.17 48.03 14.84L48.03 14.84L48.15 14.95Q42.72 17.14 36.98 16.91L36.90 16.84L37.09 17.03Q30.89 16.58 26.13 13.61L26.23 13.70L26.17 13.65Q27.18 15.49 28.02 18.16L28.10 18.24L28.03 18.17Q29.09 18.78 29.89 19.08L30.00 19.19L30.08 19.26Q30.19 19.56 30.64 21.43L30.62 21.41L30.60 21.39Q33.71 22.59 39.23 22.44L39.36 22.57L39.21 22.42Q39.05 23.14 37.07 26.91L37.03 26.86L36.95 26.78Q34.92 26.81 32.94 26.62L32.87 26.55L33.02 26.70Q33.13 27.57 33.13 28.45L33.01 28.33L33.08 30.11L34.68 30.03L34.62 31.38L34.79 31.55Q30.86 38.93 28.08 42.51L28.00 42.43L27.97 42.40Q29.63 41.70 31.27 41.20L31.29 41.23L31.33 41.27Q30.50 42.04 29.13 43.75L29.17 43.79L29.24 43.85Q32.40 42.75 34.83 42.52L34.74 42.43L34.75 42.44Q37.77 38.76 40.89 31.98L40.74 31.83L44.35 32.21L44.25 32.10Q44.16 31.18 44.16 30.26L44.15 30.25L44.26 28.58L44.11 28.42Q43.92 28.50 43.37 28.54L43.34 28.51L43.31 28.49Q42.77 28.53 42.50 28.53L42.46 28.49L42.62 28.65Q42.59 28.50 42.63 28.35L42.69 28.41L42.68 28.14L42.60 28.05Q45.12 22.93 48.21 18.28Z'/></svg>"

2. 对数据进行转码

/**
 * 转换成svg的css背景字串
 * @param svgString 
 */
export const toSvgCssDackground = (svgString: string) => {
  let res = svgString;
  res = svgString
    .replace('<svg', (~svgString.indexOf('xmlns') ? '<svg' : '<svg xmlns="http://www.w3.org/2000/svg"'))

    //
    //   Encode (may need a few extra replacements)
    //
    .replace(/"/g, ''')
    .replace(/%/g, '%25')
    .replace(/#/g, '%23')
    .replace(/{/g, '%7B')
    .replace(/}/g, '%7D')
    .replace(/</g, '%3C')
    .replace(/>/g, '%3E')

    .replace(/s+/g, ' ');
  return `background-image: url("data:image/svg+xml,${res}")`;
}

3. 在wxml中使用

<image class="svg-captcha" style="{{svgDataBG}}" width="100" height="60"></image>

.svg-captcha{
  width: 100px;
  height: 50px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

代码007普通

打赏 收藏 海报 链接