Javascript encodeURIComponent不返回svg

大家好，这个组件没有返回我的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);

这是编码组件之前的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>

这只是URI编码。有什么问题吗？@RobertLongson SVG在URI之后未在图像源中返回encoding@RobertLongson请再次检查我的问题，现在我编辑了我的问题并将其发布到代码中。”img.src'无法获取有效的图像源。在SVG中不能有外部图像作为图像使用，需要将元素转换为使用数据URI

<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>