Home Explore Help
Register Sign In
caner
/
mini-program-svg
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Tree: 59f5e5e1d3
Branches Tags
mini-program-sv...
/
pages
/
index
/
index.js

index.js 20 KB
History Raw

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879 
  1. Page({
    2. 

  2.   async onLoad() {
    3. 

  3.     const dd = this.svg2base64('<svg width="100%" height="100%"><line x1="410" y1="416.9152" x2="410" y2="316.9152" style="stroke: rgb(86, 195, 185); stroke-width: 1;"></line><line x1="590" y1="416.9152" x2="590" y2="316.9152" style="stroke: rgb(86, 195, 185); stroke-width: 1;"></line><line x1="422" y1="416.9152" x2="422" y2="316.9152" style="stroke: rgb(86, 195, 185); stroke-width: 1;"></line><line x1="578" y1="416.9152" x2="578" y2="316.9152" style="stroke: rgb(86, 195, 185); stroke-width: 1;"></line><line x1="434" y1="416.9152" x2="434" y2="316.9152" style="stroke: rgb(86, 195, 185); stroke-width: 1;"></line><line x1="566" y1="416.9152" x2="566" y2="316.9152" style="stroke: rgb(86, 195, 185); stroke-width: 1;"></line><line x1="695.2461691253377" y1="456.9152" x2="304.75383087466224" y2="456.9152" style="stroke: rgb(62, 125, 255); stroke-width: 1;"></line><path d="M 746.4449063453155 396.3271527458 A 252.8 252.8 -180 1 0 253.55509365468453 396.3271527458M 695.2461691253377 456.9152 A 291.8446 291.8446 -180 0 0 746.4449063453155 396.3271527458M 253.55509365468453 396.3271527458 A 291.8446 291.8446 -180 0 0 304.75383087466224 456.9152" stroke="#3E7DFF" stroke-width="1" fill="none"></path><path d="M 717.3465835285529 384.22332674579997 A 221.8 221.8 -180 1 0 282.65341647144714 384.22332674579997M 674.5069426915251 433.8742693129152 A 260.8446 260.8446 -180 0 0 717.3465835285529 384.22332674579997M 282.65341647144714 384.22332674579997 A 260.8446 260.8446 -180 0 0 325.49305730847493 433.8742693129152M 683.3346005961494 370.1672707458 A 185.8 185.8 -180 1 0 316.66539940385064 370.1672707458M 650.4226797361298 407.1170594827521 A 224.84459999999999 224.84459999999999 -180 0 0 683.3346005961494 370.1672707458M 316.66539940385064 370.1672707458 A 224.84459999999999 224.84459999999999 -180 0 0 349.5773202638702 407.1170594827521M 648.9310872833967 356.1112147458 A 149.8 149.8 -180 1 0 351.06891271660334 356.1112147458M 626.3384167807346 380.3598496525891 A 188.84459999999999 188.84459999999999 -180 0 0 648.9310872833967 356.1112147458M 351.06891271660334 356.1112147458 A 188.84459999999999 188.84459999999999 -180 0 0 373.6615832192655 380.3598496525891M 613.7814410285331 342.0551587458 A 113.8 113.8 -180 1 0 386.2185589714669 342.0551587458M 602.2541538253392 353.60263982242606 A 152.84459999999999 152.84459999999999 -180 0 0 613.7814410285331 342.0551587458M 386.2185589714669 342.0551587458 A 152.84459999999999 152.84459999999999 -180 0 0 397.7458461746608 353.60263982242606" stroke="#3E7DFF50" stroke-width="1" fill="none"></path><circle r="3" fill="#3E7DFF" stroke="black" stroke-width="1" cx="286.6356466659255" cy="439.1203738332474"></circle><circle r="3" fill="#3E7DFF" stroke="black" stroke-width="1" cx="270.13303838414726" cy="419.81782588680153"></circle><circle r="3" fill="#3E7DFF" stroke="black" stroke-width="1" cx="255.37096231305267" cy="399.153713338766"></circle><circle r="3" fill="#3E7DFF" stroke="black" stroke-width="1" cx="249.5860111134874" cy="374.6507455900381"></circle><circle r="3" fill="#3E7DFF" stroke="black" stroke-width="1" cx="247.37313997375577" cy="349.3546562352878"></circle><circle r="3" fill="#3E7DFF" stroke="black" stroke-width="1" cx="247.70911110612582" cy="323.9641844255165"></circle><circle r="3" fill="#3E7DFF" stroke="black" stroke-width="1" cx="250.59053477830903" cy="298.7355036644075"></circle><circle r="3" fill="#3E7DFF" stroke="black" stroke-width="1" cx="255.98833928170424" cy="273.92315508819047"></circle><circle r="3" fill="#3E7DFF" stroke="black" stroke-width="1" cx="263.8480642462092" cy="249.77747930955655"></circle><circle r="3" fill="#3E7DFF" stroke="black" stroke-width="1" cx="274.09041011027097" cy="226.54209064214857"></circle><circle r="3" fill="#3E7DFF" stroke="black" stroke-width="1" cx="286.6120382023755" cy="204.45141918907618"></circle><circle r="3" fill="#3E7DFF" stroke="black" stroke-width="1" cx="301.286613361672" cy="183.7283455941982"></circle><circle r="3" fill="#3E7DFF" stroke="black" stroke-width="1" cx="317.9660785783584" cy="164.58195232000892"></circle><circle r="3" fill="#3E7DFF" stroke="black" stroke-width="1" cx="336.4821487935304" cy="147.20541414028537"></circle><circle r="3" fill="#3E7DFF" stroke="black" stroke-width="1" cx="356.6480087870142" cy="131.77404913106525"></circle><circle r="3" fill="#3E7DFF" stroke="black" stroke-width="1" cx="378.2601980225892" cy="118.44354982420214"></circle><circle r="3" fill="#3E7DFF" stroke="black" stroke-width="1" cx="401.1006634337261" cy="107.34841237001865"></circle><circle r="3" fill="#3E7DFF" stroke="black" stroke-width="1" cx="424.9389594385567" cy="98.60057955779311"></circle><circle r="3" fill="#3E7DFF" stroke="black" stroke-width="1" cx="449.5345729873376" cy="92.28831138513138"></circle><circle r="3" fill="#3E7DFF" stroke="black" stroke-width="1" cx="474.63935018418096" cy="88.47529457144893"></circle><circle r="3" fill="#3E7DFF" stroke="black" stroke-width="1" cx="500" cy="87.2"></circle><circle r="3" fill="#3E7DFF" stroke="black" stroke-width="1" cx="525.360649815819" cy="88.47529457144893"></circle><circle r="3" fill="#3E7DFF" stroke="black" stroke-width="1" cx="550.4654270126624" cy="92.28831138513138"></circle><circle r="3" fill="#3E7DFF" stroke="black" stroke-width="1" cx="575.0610405614433" cy="98.60057955779311"></circle><circle r="3" fill="#3E7DFF" stroke="black" stroke-width="1" cx="598.8993365662739" cy="107.34841237001865"></circle><circle r="3" fill="#3E7DFF" stroke="black" stroke-width="1" cx="621.7398019774108" cy="118.44354982420214"></circle><circle r="3" fill="#3E7DFF" stroke="black" stroke-width="1" cx="643.3519912129858" cy="131.77404913106525"></circle><circle r="3" fill="#3E7DFF" stroke="black" stroke-width="1" cx="663.5178512064696" cy="147.20541414028537"></circle><circle r="3" fill="#3E7DFF" stroke="black" stroke-width="1" cx="682.0339214216416" cy="164.58195232000892"></circle><circle r="3" fill="#3E7DFF" stroke="black" stroke-width="1" cx="698.7133866383281" cy="183.7283455941982"></circle><circle r="3" fill="#3E7DFF" stroke="black" stroke-width="1" cx="713.3879617976245" cy="204.45141918907618"></circle><circle r="3" fill="#3E7DFF" stroke="black" stroke-width="1" cx="725.9095898897291" cy="226.54209064214857"></circle><circle r="3" fill="#3E7DFF" stroke="black" stroke-width="1" cx="736.1519357537907" cy="249.77747930955655"></circle><circle r="3" fill="#3E7DFF" stroke="black" stroke-width="1" cx="744.0116607182957" cy="273.92315508819047"></circle><circle r="3" fill="#3E7DFF" stroke="black" stroke-width="1" cx="749.409465221691" cy="298.7355036644075"></circle><circle r="3" fill="#3E7DFF" stroke="black" stroke-width="1" cx="752.2908888938742" cy="323.9641844255165"></circle><circle r="3" fill="#3E7DFF" stroke="black" stroke-width="1" cx="752.6268600262442" cy="349.3546562352878"></circle><circle r="3" fill="#3E7DFF" stroke="black" stroke-width="1" cx="750.4139888865126" cy="374.6507455900381"></circle><circle r="3" fill="#3E7DFF" stroke="black" stroke-width="1" cx="744.6290376869473" cy="399.153713338766"></circle><circle r="3" fill="#3E7DFF" stroke="black" stroke-width="1" cx="729.8669616158528" cy="419.81782588680153"></circle><circle r="3" fill="#3E7DFF" stroke="black" stroke-width="1" cx="713.3643533340744" cy="439.1203738332474"></circle><circle r="3" fill="#E8575A" stroke="black" stroke-width="1" cx="500" cy="456.9152"></circle><circle r="3" fill="#E8575A" stroke="black" stroke-width="1" cx="695.2461691253377" cy="456.9152"></circle><circle r="3" fill="#FAAD38" stroke="black" stroke-width="1" cx="325.49305730847493" cy="433.8742693129152"></circle><circle r="3" fill="#FAAD38" stroke="black" stroke-width="1" cx="296.8576857467888" cy="403.62489269365335"></circle><circle r="3" fill="#FAAD38" stroke="black" stroke-width="1" cx="279.826540464639" cy="366.81208153483703"></circle><circle r="3" fill="#FAAD38" stroke="black" stroke-width="1" cx="278.6949302018561" cy="325.19101348374386"></circle><circle r="3" fill="#FAAD38" stroke="black" stroke-width="1" cx="285.3619018226608" cy="284.09180014689343"></circle><circle r="3" fill="#FAAD38" stroke="black" stroke-width="1" cx="299.5925175366635" cy="244.96273902985484"></circle><circle r="3" fill="#FAAD38" stroke="black" stroke-width="1" cx="320.88530387106596" cy="209.1827013325851"></circle><circle r="3" fill="#FAAD38" stroke="black" stroke-width="1" cx="348.48992312275993" cy="178.01254182915022"></circle><circle r="3" fill="#FAAD38" stroke="black" stroke-width="1" cx="381.43361455112625" cy="152.55066753495998"></circle><circle r="3" fill="#FAAD38" stroke="black" stroke-width="1" cx="418.55547354884584" cy="133.69433087976654"></circle><circle r="3" fill="#FAAD38" stroke="black" stroke-width="1" cx="458.5473608250801" cy="122.10801137849539"></circle><circle r="3" fill="#FAAD38" stroke="black" stroke-width="1" cx="500" cy="118.2"></circle><circle r="3" fill="#FAAD38" stroke="black" stroke-width="1" cx="541.4526391749199" cy="122.10801137849539"></circle><circle r="3" fill="#FAAD38" stroke="black" stroke-width="1" cx="581.4445264511542" cy="133.69433087976654"></circle><circle r="3" fill="#FAAD38" stroke="black" stroke-width="1" cx="618.5663854488737" cy="152.55066753495998"></circle><circle r="3" fill="#FAAD38" stroke="black" stroke-width="1" cx="651.5100768772402" cy="178.01254182915022"></circle><circle r="3" fill="#FAAD38" stroke="black" stroke-width="1" cx="679.114696128934" cy="209.1827013325851"></circle><circle r="3" fill="#FAAD38" stroke="black" stroke-width="1" cx="700.4074824633365" cy="244.96273902985484"></circle><circle r="3" fill="#FAAD38" stroke="black" stroke-width="1" cx="714.6380981773392" cy="284.09180014689343"></circle><circle r="3" fill="#FAAD38" stroke="black" stroke-width="1" cx="721.3050697981439" cy="325.19101348374386"></circle><circle r="3" fill="#FAAD38" stroke="black" stroke-width="1" cx="720.173459535361" cy="366.81208153483703"></circle><circle r="3" fill="#FAAD38" stroke="black" stroke-width="1" cx="703.1423142532112" cy="403.62489269365335"></circle><circle r="3" fill="#FAAD38" stroke="black" stroke-width="1" cx="674.5069426915251" cy="433.8742693129152"></circle><circle r="3" fill="#FAAD38" stroke="black" stroke-width="1" cx="349.5773202638702" cy="407.1170594827521"></circle><circle r="3" fill="#FAAD38" stroke="black" stroke-width="1" cx="320.11295310428625" cy="374.891602808697"></circle><circle r="3" fill="#FAAD38" stroke="black" stroke-width="1" cx="314.3547522647482" cy="332.41831197443645"></circle><circle r="3" fill="#FAAD38" stroke="black" stroke-width="1" cx="321.24199067748026" cy="289.3323169757098"></circle><circle r="3" fill="#FAAD38" stroke="black" stroke-width="1" cx="337.9875705655699" cy="249.04059856862614"></circle><circle r="3" fill="#FAAD38" stroke="black" stroke-width="1" cx="363.66798844312973" cy="213.76520834232196"></circle><circle r="3" fill="#FAAD38" stroke="black" stroke-width="1" cx="396.86699264330343" cy="185.45155195355866"></circle><circle r="3" fill="#FAAD38" stroke="black" stroke-width="1" cx="435.7536883083586" cy="165.66110177582152"></circle><circle r="3" fill="#FAAD38" stroke="black" stroke-width="1" cx="478.18350957426856" cy="155.48528311946507"></circle><circle r="3" fill="#FAAD38" stroke="black" stroke-width="1" cx="521.8164904257314" cy="155.48528311946507"></circle><circle r="3" fill="#FAAD38" stroke="black" stroke-width="1" cx="564.2463116916414" cy="165.66110177582152"></circle><circle r="3" fill="#FAAD38" stroke="black" stroke-width="1" cx="603.1330073566966" cy="185.45155195355866"></circle><circle r="3" fill="#FAAD38" stroke="black" stroke-width="1" cx="636.3320115568703" cy="213.76520834232196"></circle><circle r="3" fill="#FAAD38" stroke="black" stroke-width="1" cx="662.0124294344301" cy="249.04059856862614"></circle><circle r="3" fill="#FAAD38" stroke="black" stroke-width="1" cx="678.7580093225197" cy="289.3323169757098"></circle><circle r="3" fill="#FAAD38" stroke="black" stroke-width="1" cx="685.6452477352518" cy="332.41831197443645"></circle><circle r="3" fill="#FAAD38" stroke="black" stroke-width="1" cx="679.8870468957138" cy="374.891602808697"></circle><circle r="3" fill="#FAAD38" stroke="black" stroke-width="1" cx="650.4226797361298" cy="407.1170594827521"></circle><circle r="3" fill="#FAAD38" stroke="black" stroke-width="1" cx="373.6615832192655" cy="380.3598496525891"></circle><circle r="3" fill="#FAAD38" stroke="black" stroke-width="1" cx="350.30235403820564" cy="345.5366771169419"></circle><circle r="3" fill="#FAAD38" stroke="black" stroke-width="1" cx="355.05735055602594" cy="302.1626061658411"></circle><circle r="3" fill="#FAAD38" stroke="black" stroke-width="1" cx="372.10997276558436" cy="261.9988401754152"></circle><circle r="3" fill="#FAAD38" stroke="black" stroke-width="1" cx="400.01339486508795" cy="228.4530646158525"></circle><circle r="3" fill="#FAAD38" stroke="black" stroke-width="1" cx="436.4001574365211" cy="204.3714630842731"></circle><circle r="3" fill="#FAAD38" stroke="black" stroke-width="1" cx="478.1830339944139" cy="191.7972335133008"></circle><circle r="3" fill="#FAAD38" stroke="black" stroke-width="1" cx="521.8169660055861" cy="191.7972335133008"></circle><circle r="3" fill="#FAAD38" stroke="black" stroke-width="1" cx="563.5998425634789" cy="204.3714630842731"></circle><circle r="3" fill="#FAAD38" stroke="black" stroke-width="1" cx="599.986605134912" cy="228.4530646158525"></circle><circle r="3" fill="#FAAD38" stroke="black" stroke-width="1" cx="627.8900272344156" cy="261.9988401754152"></circle><circle r="3" fill="#FAAD38" stroke="black" stroke-width="1" cx="644.942649443974" cy="302.1626061658411"></circle><circle r="3" fill="#FAAD38" stroke="black" stroke-width="1" cx="649.6976459617944" cy="345.5366771169419"></circle><circle r="3" fill="#FAAD38" stroke="black" stroke-width="1" cx="626.3384167807346" cy="380.3598496525891"></circle><circle r="3" fill="#FAAD38" stroke="black" stroke-width="1" cx="397.7458461746608" cy="353.60263982242606"></circle><circle r="3" fill="#FAAD38" stroke="black" stroke-width="1" cx="389.02921605559914" cy="314.78244439353597"></circle><circle r="3" fill="#FAAD38" stroke="black" stroke-width="1" cx="406.6202745005114" cy="274.95642333296735"></circle><circle r="3" fill="#FAAD38" stroke="black" stroke-width="1" cx="437.87933337450903" cy="244.65083756002568"></circle><circle r="3" fill="#FAAD38" stroke="black" stroke-width="1" cx="478.23100088009795" cy="228.3015189122175"></circle><circle r="3" fill="#FAAD38" stroke="black" stroke-width="1" cx="521.768999119902" cy="228.3015189122175"></circle><circle r="3" fill="#FAAD38" stroke="black" stroke-width="1" cx="562.1206666254909" cy="244.65083756002568"></circle><circle r="3" fill="#FAAD38" stroke="black" stroke-width="1" cx="593.3797254994886" cy="274.95642333296735"></circle><circle r="3" fill="#FAAD38" stroke="black" stroke-width="1" cx="610.9707839444009" cy="314.78244439353597"></circle><circle r="3" fill="#FAAD38" stroke="black" stroke-width="1" cx="602.2541538253392" cy="353.60263982242606"></circle><circle r="3" fill="#56C3B9" stroke="black" stroke-width="1" cx="410" cy="416.9152"></circle><circle r="3" fill="#56C3B9" stroke="black" stroke-width="1" cx="410" cy="391.9152"></circle><circle r="3" fill="#56C3B9" stroke="black" stroke-width="1" cx="410" cy="366.9152"></circle><circle r="3" fill="#56C3B9" stroke="black" stroke-width="1" cx="410" cy="341.9152"></circle><circle r="3" fill="#56C3B9" stroke="black" stroke-width="1" cx="410" cy="316.9152"></circle><circle r="3" fill="#56C3B9" stroke="black" stroke-width="1" cx="590" cy="416.9152"></circle><circle r="3" fill="#56C3B9" stroke="black" stroke-width="1" cx="590" cy="391.9152"></circle><circle r="3" fill="#56C3B9" stroke="black" stroke-width="1" cx="590" cy="366.9152"></circle><circle r="3" fill="#56C3B9" stroke="black" stroke-width="1" cx="590" cy="341.9152"></circle><circle r="3" fill="#56C3B9" stroke="black" stroke-width="1" cx="590" cy="316.9152"></circle><circle r="3" fill="#56C3B9" stroke="black" stroke-width="1" cx="422" cy="416.9152"></circle><circle r="3" fill="#56C3B9" stroke="black" stroke-width="1" cx="422" cy="391.9152"></circle><circle r="3" fill="#56C3B9" stroke="black" stroke-width="1" cx="422" cy="366.9152"></circle><circle r="3" fill="#56C3B9" stroke="black" stroke-width="1" cx="422" cy="341.9152"></circle><circle r="3" fill="#56C3B9" stroke="black" stroke-width="1" cx="422" cy="316.9152"></circle><circle r="3" fill="#56C3B9" stroke="black" stroke-width="1" cx="578" cy="416.9152"></circle><circle r="3" fill="#56C3B9" stroke="black" stroke-width="1" cx="578" cy="391.9152"></circle><circle r="3" fill="#56C3B9" stroke="black" stroke-width="1" cx="578" cy="366.9152"></circle><circle r="3" fill="#56C3B9" stroke="black" stroke-width="1" cx="578" cy="341.9152"></circle><circle r="3" fill="#56C3B9" stroke="black" stroke-width="1" cx="578" cy="316.9152"></circle><circle r="3" fill="#56C3B9" stroke="black" stroke-width="1" cx="434" cy="416.9152"></circle><circle r="3" fill="#56C3B9" stroke="black" stroke-width="1" cx="434" cy="391.9152"></circle><circle r="3" fill="#56C3B9" stroke="black" stroke-width="1" cx="434" cy="366.9152"></circle><circle r="3" fill="#56C3B9" stroke="black" stroke-width="1" cx="434" cy="341.9152"></circle><circle r="3" fill="#56C3B9" stroke="black" stroke-width="1" cx="434" cy="316.9152"></circle><circle r="3" fill="#56C3B9" stroke="black" stroke-width="1" cx="566" cy="416.9152"></circle><circle r="3" fill="#56C3B9" stroke="black" stroke-width="1" cx="566" cy="391.9152"></circle><circle r="3" fill="#56C3B9" stroke="black" stroke-width="1" cx="566" cy="366.9152"></circle><circle r="3" fill="#56C3B9" stroke="black" stroke-width="1" cx="566" cy="341.9152"></circle><circle r="3" fill="#56C3B9" stroke="black" stroke-width="1" cx="566" cy="316.9152"></circle></svg>')
    4. 

  4. 

  5.     this.setData({
    6. 

  6.       bk: dd
    7. 

  7.     })
    8. 

  8.    const sf =await this.countRatio(1264)
    9. 

  9.    console.log(66,sf);
    10. 

  10.   },
    11. 

  11.   // 拼接SVG path
    12. 

  12.   drawSvg() {
    13. 

  13. 

  14.   },
    15. 

  15.   /**
    16. 

  16.    * 计算缩放率
    17. 

  17.    * @param {*} Cw 隧道宽度
    18. 

  18.    */
    19. 

  19.   async countRatio(Cw){
    20. 

  20.     const res = await  wx.getSystemInfo()
    21. 

  21.     const sw = (res.screenWidth || 375) / Cw
    22. 

  22.     return sw
    23. 

  23.   },
    24. 

  24. 

  25.   /**
    26. 

  26.    * 画半圆
    27. 

  27.    * M x0 y0 起始位置，A用来画圆弧 rx ry 圆弧xy轴的半径 rotaion 角度 large-arc-flag 大或者小圆弧 sweep-flag 顺时针|逆时针 x1 y1 终点坐标
    28. 

  28.    * M x0 y0 A rx ry rotaion large-arc-flag s weep-flag x1 y1
    29. 

  29.    * d='M 50 200 A 100 100 -180 1 1 250 200'
    30. 

  30.    * @param x1 起始位置x
    31. 

  31.    * @param y1 起始位置y
    32. 

  32.    * @param r 半径
    33. 

  33.    * @param x2 结束位置x
    34. 

  34.    * @param y2 结束位置y
    35. 

  35.    * @param t 圆弧大小（1，0）
    36. 

  36.    */
    37. 

  37.   drawCircle(x1 = 0, y1 = 0, r = 100, x2, y2, t = 1) {
    38. 

  38.     const d = `M ${x1} ${y1} A ${r} ${r} -180 ${t} 1 ${x2} ${y2}`
    39. 

  39.     return d
    40. 

  40.   },
    41. 

  41.   // SVG2base64
    42. 

  42.   svg2base64(svg) {
    43. 

  43.     // 将被设置到 dataset 中的属性还原出来
    44. 

  44.     svg = svg.replace(/data-(.*?=(['"]).*?\2)/g, '$1');
    45. 

  45. 

  46.     // 将被设置到 data-xlink-href 的属性还原出来
    47. 

  47.     svg = svg.replace(/xlink-href=/g, 'xlink:href=');
    48. 

  48. 

  49.     // 将 dataset 中被变成 kebab-case 写法的 viewBox 还原出来
    50. 

  50.     svg = svg.replace(/view-box=/g, 'viewBox=');
    51. 

  51. 

  52.     // 清除 SVG 中不应该显示的 title、desc、defs 元素
    53. 

  53.     svg = svg.replace(/<(title|desc|defs)>[\s\S]*?<\/\1>/g, '');
    54. 

  54. 

  55.     // 为非标准 XML 的 SVG 添加 xmlns，防止视图层解析出错
    56. 

  56.     if (!/xmlns=/.test(svg)) svg = svg.replace(/<svg/, "<svg xmlns='http://www.w3.org/2000/svg'");
    57. 

  57. 

  58.     // 对 SVG 中出现的浮点数统一取最多两位小数，缓解数据量过大问题
    59. 

  59.     svg = svg.replace(/\d+\.\d+/g, (match) => parseFloat(parseFloat(match).toFixed(2)));
    60. 

  60. 

  61.     // 清除注释，缓解数据量过大的问题
    62. 

  62.     svg = svg.replace(/<!--[\s\S]*?-->/g, '');
    63. 

  63. 

  64.     // 模拟 HTML 的 white-space 行为，将多个空格或换行符换成一个空格，减少数据量
    65. 

  65.     svg = svg.replace(/\s+/g, " ");
    66. 

  66. 

  67.     // 对特殊符号进行转义，这里参考了 https://github.com/bhovhannes/svg-url-loader/blob/master/src/loader.js
    68. 

  68.     svg = svg.replace(/[{}\|\\\^~\[\]`"<>#%]/g, function (match) {
    69. 

  69.       return '%' + match[0].charCodeAt(0).toString(16).toUpperCase();
    70. 

  70.     });
    71. 

  71. 

  72.     // 单引号替换为 \'，由于 kbone 的 bug，节点属性中的双引号在生成 outerHTML 时不会被转义导致出错
    73. 

  73.     // 因此 background-image: url( 后面只能跟单引号，所以生成的 URI 内部也就只能用斜杠转义单引号了
    74. 

  74.     svg = svg.replace(/'/g, "\\'");
    75. 

  75. 

  76.     // 最后添加 mime 头部，变成 Webview 可以识别的 Data URI
    77. 

  77.     return 'data:image/svg+xml,' + svg.trim();
    78. 

  78.   },
    79. 

  79. })
    80.