Hello Guys encodeURIComponent不会返回我的svg。
var svg ='<svg id="vgroovFrame" xmlns="http://www.w3.org/2000/svg" width="576" height="720"><defs> <pattern id="matpattern" x="0" y="0" width="200" height="200" patternUnits="userSpaceOnUse"> <image width="200" height="200" xlink:href="https://i.pinimg.com/564x/e1/a5/b7/e1a5b7edacee456a4f3bc3e00c3c01d9.jpg"/></pattern></defs><path d= M 82.29,164.57 C 82.29,164.57 164.57,164.57 164.57,82.29 L 164.57,82.29 411.43,82.29 C 411.43,82.29 411.43,164.57 493.71,164.57 L 493.71,164.57 493.71,555.43 C 493.71,555.43 411.43,555.43 411.43,637.71 L 411.43,637.71 164.57,637.71 C 164.57,637.71 164.57,555.43 82.29,555.43 L 82.29,555.43 82.29,164.57 L 82.29,164.57 0.00,164.57 0.00,0.00 0.00,596.57 L 0.00,596.57 82.29,596.57 82.29,596.57 82.29,596.57 C 82.29,596.57 123.43,596.57 123.43,637.71 C 123.43,637.71 123.43,678.86 82.29,678.86 C 82.29,678.86 41.14,678.86 41.14,637.71 C 41.14,637.71 41.14,596.57 82.29,596.57 L 82.29,596.57 0.00,596.57 0.00,720.00 452.57,720.00 452.57,637.71 C 452.57,637.71 452.57,596.57 493.71,596.57 C 493.71,596.57 534.86,596.57 534.86,637.71 C 534.86,637.71 534.86,678.86 493.71,678.86 C 493.71,678.86 452.57,678.86 452.57,637.71 L 452.57,637.71 452.57,720.00 576.00,720.00 576.00,123.43 493.71,123.43 C 493.71,123.43 452.57,123.43 452.57,82.29 C 452.57,82.29 452.57,41.14 493.71,41.14 C 493.71,41.14 534.86,41.14 534.86,82.29 C 534.86,82.29 534.86,123.43 493.71,123.43 L 493.71,123.43 576.00,123.43 576.00,0.00 123.43,0.00 123.43,82.29 C 123.43,82.29 123.43,123.43 82.29,123.43 C 82.29,123.43 41.14,123.43 41.14,82.29 C 41.14,82.29 41.14,41.14 82.29,41.14 C 82.29,41.14 123.43,41.14 123.43,82.29 L 123.43,82.29 123.43,0.00 0.00,0.00 0.00,164.57 " fill="#ff0000;" stroke="#f000" stroke-width="1px" style="fill:url(#matpattern)"/></path></svg>';
data = encodeURIComponent(svg);
以下是退货数据的输出
％3Csvg％20id％3D％22vgroovFrame％22％20xmlns％3D％22http％3A％2F％2Fwww.w3.org％2F2000％2Fsvg％22％20width％3D％22576％22％20height％3D％22720％ 22％3E％3Cdefs％3E％20％3Cpattern％20id％3D％22matpattern％22％20×％3D％220％22％20Y％3D％220％22％20width％3D％22200％22％20height％3D％22200％ 22个％20patternUnits％3D％22userSpaceOnUse％22％3E％20％3Cimage％20width％3D％22200％22％20height％3D％22200％22％20xlink％3Ahref％3D％22https％3A％2F％2Fcdn1.arttoframe.com％ 2Fproducts％2Fmats％2Fimages％2F200％2F61.jpg％22％2F％3E％3C％2Fpattern％3E％3C％2Fdefs％3E％3Cpath％20D％3D％20M％2082.29％2C164.57％20C％2082.29％2C164。 57％20164.57％2C164.57％20164.57％2C82.29％20L％20164.57％2C82.29％20411.43％2C82.29％20C％20411.43％2C82.29％20411.43％2C164.57％20493.71％2C164.57％20L％ 20493.71％2C164.57％20493.71％2C555.43％20C％20493.71％2C555.43％20411.43％2C555.43％20411.43％2C637.71％20L％20411.43％2C637.71％20164.57％2C637.71％20C％20164.57％ 2C637.71％20164.57％2C555.43％2082.29％2C555.43％20L％2082.29％2C555.43％2082.29％2C164.57％20L％2082.29％2C164.57％200.00％2C164.57％200.00％2C0.00％ 200.00％2C596.57％20L％200.00％2C596.57％2082.29％2C596.57％20 82.29％2C596.57％2082.29％2C596.57％20C％2082.29％2C596.57％20123.43％2C596.57％20123.43％2C637.71％20C％20123.43％2C637.71％20123.43％2C678.86％2082.29％2C678。 86％20℃％％2082.29％2C678.86％2041.14％2C678.86％2041.14％2C637.71 20C％2041.14％2C637.71％2041.14％2C596.57％2082.29％2C596.57％20L％2082.29％2C596.57％ 200.00％2C596.57％200.00％2C720.00％20452.57％2C720.00％20452.57％2C637.71％20C％20452.57％2C637.71％20452.57％2C596.57％20493.71％2C596.57％20C％20493.71％2C596。 57％20534.86％2C596.57％20534.86％2C637.71％20C％20534.86％2C637.71％20534.86％2C678.86％20493.71％2C678.86％20C％20493.71％2C678.86％20452.57％2C678.86％20452.57％ 2C637.71％20L％20452.57％2C637.71％20452.57％2C720.00％20576.00％2C720.00％20576.00％2C123.43％20493.71％2C123.43％20C％20493.71％2C123.43％20452.57％2C123.43％ 20452.57％2C82.29％20C％20452.57％2C82.29％20452.57％2C41.14％20493.71％2C41.14％20C％20493.71％2C41.14％20534.86％2C41.14％20534.86％2C82.29％20C％20534.86％ 2C82.29％20534.86％2C123.43％20493.71％2C123.43％20L％20493.71％2C123.43％20576.00％2C123.43％20576.00％2C0.00％20123.43％2C0.00％20123.43％2C82.29％20C％ 20123.43％2C8 2.29％20123.43％2C123.43％2082.29％2C123.43％20C％2082.29％2C123.43％2041.14％2C123.43％2041.14％2C82.29％20C％2041.14％2C82.29％2041.14％2C41.14％2082.29％ 2C41.14％20C％2082.29％2C41.14％20123.43％2C41.14％20123.43％2C82.29％20L％20123.43％2C82.29％20123.43％2C0.00％200.00％2C0.00％200.00％2C164.57％ 20％22％20fill％3D％22％23ff0000％3B％22％20stroke％3D％22％23f000％22％20stroke宽度％3D％221px％22％20style％3D％22fill％3Aurl（％23matpattern）％22％ 2F％3E％3C％2Fpath％3E％3C％2Fsvg％3E
这是完整的代码
var popupMatArr = self.getPopUpMatDesign(self.configuration.popupMatStringCode,self.configuration.popupMatStringTopCode,self.configuration.popupMatStringBottomCode, self.selectedColor2, self.selectedColor3, self.configuration.popupMat_appliedMat, parseFloat(self.configuration.cuts[$("#removeimg").attr("data-val")].w), parseFloat(self.configuration.cuts[$("#removeimg").attr("data-val")].h));
var data1 = encodeURIComponent(popupMatArr.svg);
img = new Image();
img.src = "data:image/svg+xml;utf8," + data1;
img.onload = function() {
self.ctx.drawImage(img,
0, 0,
popupMatArr.WD,
popupMatArr.HT,
((parseFloat(self.configuration.glass['frameWidth']) - vgroovConfigArr.dt/parseFloat(self.configuration.ppi)) * parseFloat(self.configuration.ppi) )* self.scale,
((parseFloat(self.configuration.glass['frameWidth']) - vgroovConfigArr.dt/parseFloat(self.configuration.ppi)) * parseFloat(self.configuration.ppi) )* self.scale,
popupMatArr.WD * self.scale,
popupMatArr.HT * self.scale,
);
}
这是encodeURIComponent
之前的Svg图像<svg id="vgroovFrame" xmlns="http://www.w3.org/2000/svg" width="576" height="720">
<defs>
<pattern id="matpattern" x="0" y="0" width="200" height="200" patternUnits="userSpaceOnUse">
<image width="200" height="200" xlink:href="https://i.pinimg.com/564x/e1/a5/b7/e1a5b7edacee456a4f3bc3e00c3c01d9.jpg"></image>
</pattern>
</defs>
<path d=" M 82.29,164.57 C 82.29,164.57 164.57,164.57 164.57,82.29 L 164.57,82.29 411.43,82.29 C 411.43,82.29 411.43,164.57 493.71,164.57 L 493.71,164.57 493.71,555.43 C 493.71,555.43 411.43,555.43 411.43,637.71 L 411.43,637.71 164.57,637.71 C 164.57,637.71 164.57,555.43 82.29,555.43 L 82.29,555.43 82.29,164.57 L 82.29,164.57 0.00,164.57 0.00,0.00 0.00,596.57 L 0.00,596.57 82.29,596.57 82.29,596.57 82.29,596.57 C 82.29,596.57 123.43,596.57 123.43,637.71 C 123.43,637.71 123.43,678.86 82.29,678.86 C 82.29,678.86 41.14,678.86 41.14,637.71 C 41.14,637.71 41.14,596.57 82.29,596.57 L 82.29,596.57 0.00,596.57 0.00,720.00 452.57,720.00 452.57,637.71 C 452.57,637.71 452.57,596.57 493.71,596.57 C 493.71,596.57 534.86,596.57 534.86,637.71 C 534.86,637.71 534.86,678.86 493.71,678.86 C 493.71,678.86 452.57,678.86 452.57,637.71 L 452.57,637.71 452.57,720.00 576.00,720.00 576.00,123.43 493.71,123.43 C 493.71,123.43 452.57,123.43 452.57,82.29 C 452.57,82.29 452.57,41.14 493.71,41.14 C 493.71,41.14 534.86,41.14 534.86,82.29 C 534.86,82.29 534.86,123.43 493.71,123.43 L 493.71,123.43 576.00,123.43 576.00,0.00 123.43,0.00 123.43,82.29 C 123.43,82.29 123.43,123.43 82.29,123.43 C 82.29,123.43 41.14,123.43 41.14,82.29 C 41.14,82.29 41.14,41.14 82.29,41.14 C 82.29,41.14 123.43,41.14 123.43,82.29 L 123.43,82.29 123.43,0.00 0.00,0.00 0.00,164.57 " fill="#ff0000;" stroke="#f000" stroke-width="1px" style="fill:url(#matpattern)">
</path>
</svg>