Привет, ребята, 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% 20x% 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% 2082,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% 20C%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% 20С% 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% 2C82.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,
);
}
Это изображение Svg перед encodeURIComponent
<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>