设置src

Question

将SVG图像渲染到画布时遇到问题。当我生成svg标记并将其添加到新图像的src时，然后将该图像渲染到画布我得到了可怕的性能。我的应用程序从实时下降到无法使用。但是，如果我将相同的标记保存为svg文件并将其作为图像加载，则它会完美运行。

var svgText = `<?xml version="1.0"?>
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  width="239" height="268" id="testSVG" >
    <defs>
    <linearGradient id='grad2262398' x1='0' y1='0' x2='0' y2='1'>
    <stop offset='0.0' stop-color='#bcbbbb'/>
    <stop offset='1.0' stop-color='#d2a796'/>
    </linearGradient>
    </defs>
    <path d="M 158.5 9.0 L 225.0 97.5 L 208.5 111.0 L 141.0 23.5 L 158.5 9.0 M 118.5 44.0 L 203.0 114.5 L 189.5 132.0 L 104.0 61.5 L 118.5 44.0 M 85.5 90.0 L 185.5 136.0 L 178.0 155.5 L 76.5 111.0 L 85.5 90.0 M 67.5 141.0 L 174.5 163.0 L 171.0 185.0 L 62.5 163.0 L 67.5 141.0 M 16.0 168.0 L 38.0 168.0 L 38.0 234.0 L 192.0 234.0 L 192.0 168.0 L 215.0 168.0 L 215.0 256.0 L 16.0 256.0 L 16.0 168.0 M 60.0 190.0 L 171.0 190.0 L 171.0 213.0 L 60.0 213.0 L 60.0 190.0 "  style="fill:url(#grad2262398);"/>
    </svg>`
var image = new Image();
image.src = svgText;  // this runs very slowly

//while 
var image = new Image();
image.src = "svgText.svg"; // this renders as fast as a simillar sized bitmap image
                           // yet the content is exactly the same.

上面只是SVG如何形成的一个例子，问题不会成为一个问题，直到路径中的点数达到数千。当从文件加载时，我可以实时渲染一个具有100K +点的SVG，作为一个Javascript字符串，我每秒少于2帧。

如何解决这个问题并且仍然可以使用自动生成的路径内容，以便我可以在需要时对其进行修改。