我最终希望获得SVG图形的数据URI，我试图通过将SVG源添加到图像元素，使用画布绘制图像，然后
来实现此目的。在此示例jsFiddle中，它在尝试绘制画布时失败，我缺少什么？
我认为这应该适用于Firefox，而不是Chrome，因为安全限制。
var image = new Image();
var xml = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" fill-rule="evenodd" fill="none" stroke="none" stroke-linecap="square" stroke-miterlimit="10" overflow="hidden" preserveAspectRatio="none" width="1291px" height="1006px" viewBox="0 0 491871 383286"><rect fill="#ffffff" fill-opacity="0" width="100%" height="100%"></rect><g transform="translate(6858 12192) scale(1.309375)"><g id="editor-ged1ef149_00"><g></g><g id="editor-ged1ef149_00-bg"><g></g><path fill="#FFFFFF" fill-opacity="1" d="M 0 0 L 365760 0 365760 274320 0 274320 Z"></path></g><g id="editor-ged1ef149_01"><g></g><path d="M 18288 10985.51953125 L 347472.0076446533 10985.51953125 347472.0076446533 56705.520990371704 18288 56705.520990371704 Z"></path><path stroke="#000" stroke-opacity="0" stroke-width="2036.8496420047734" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" pointer-events="all" d="M 18288 10985.51953125 L 347472.0076446533 10985.51953125 347472.0076446533 56705.520990371704 18288 56705.520990371704 Z"></path><g direction="ltr" style="opacity: 0.8;"><g pointer-events="none" transform="matrix(381,0,0,380.99999999999994,21945,31712.5209903717)"><g><g id="editor-ged1ef149_01-paragraph-0"><g><g class="sketchy-text-background"></g><g class="sketchy-text-content"><g class="sketchy-text-content-text" transform="translate(0 43.34375)"><text x="0px" style="font-family:Arial;font-size:48px;fill:#000000;font-weight:bold;" y="0px" text-rendering="geometricPrecision">Click</text><text x="128.34375px" style="font-family:Arial;font-size:48px;fill:#000000;font-weight:bold;" y="0px" text-rendering="geometricPrecision">to</text><text x="186.6875px" style="font-family:Arial;font-size:48px;fill:#000000;font-weight:bold;" y="0px" text-rendering="geometricPrecision">add</text><text x="285.03125px" style="font-family:Arial;font-size:48px;fill:#000000;font-weight:bold;" y="0px" text-rendering="geometricPrecision">title</text></g></g></g></g></g><rect style="opacity: 0;"></rect><rect style="opacity: 1;"></rect></g><path d="M 18186.157517899763 10911.694510739857 L 347573.84248210024 10911.694510739857 347573.84248210024 56595.32219570406 18186.157517899763 56595.32219570406 Z" pointer-events="none" stroke-linecap="square" stroke-linejoin="miter" stroke-miterlimit="10" stroke-opacity="0.3" stroke-width="290.9785202863962" stroke="#000000"></path><path d="M 21336 14033.51953125 L 344424.0076446533 14033.51953125 344424.0076446533 53657.5209903717 21336 53657.5209903717 Z" pointer-events="all"></path><path d="M 21945 31712.5209903717 L 162926.90625 31712.5209903717 162926.90625 53048.5209903717 21945 53048.5209903717 Z" pointer-events="all"></path></g></g><g id="editor-ged1ef149_02"><g></g><path d="M 18288 64008 L 347472.0076446533 64008 347472.0076446533 262716.00018310547 18288 262716.00018310547 Z"></path><path stroke="#000" stroke-opacity="0" stroke-width="2036.8496420047734" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" pointer-events="all" d="M 18288 64008 L 347472.0076446533 64008 347472.0076446533 262716.00018310547 18288 262716.00018310547 Z"></path><g direction="ltr" style="opacity: 0.8;"><g pointer-events="none" transform="matrix(381,0,0,381,21945,67665)"><g><g id="editor-ged1ef149_02-paragraph-0"><g><g class="sketchy-text-background"></g><g class="sketchy-text-content"><g class="sketchy-text-content-text" transform="translate(0 44.671875)"><text x="0px" style="font-family:Arial;font-size:40px;fill:#000000;" y="0px" text-rendering="geometricPrecision">Click</text><text x="98.125px" style="font-family:Arial;font-size:40px;fill:#000000;" y="0px" text-rendering="geometricPrecision">to</text><text x="142.25px" style="font-family:Arial;font-size:40px;fill:#000000;" y="0px" text-rendering="geometricPrecision">add</text><text x="220.375px" style="font-family:Arial;font-size:40px;fill:#000000;" y="0px" text-rendering="geometricPrecision">text</text></g></g></g></g></g><rect style="opacity: 0;"></rect><rect style="opacity: 1;"></rect></g><path d="M 18186.157517899763 63869.78520286396 L 347573.84248210024 63869.78520286396 347573.84248210024 262608.1145584726 18186.157517899763 262608.1145584726 Z" pointer-events="none" stroke-linecap="square" stroke-linejoin="miter" stroke-miterlimit="10" stroke-opacity="0.3" stroke-width="290.9785202863962" stroke="#000000"></path><path d="M 21336 67056 L 344424.0076446533 67056 344424.0076446533 259668.00018310547 21336 259668.00018310547 Z" pointer-events="all"></path><path d="M 21945 70713 L 130291.875 70713 130291.875 91287 21945 91287 Z" pointer-events="all"></path></g></g><g id="editor-ged1ef149_05"><g><path stroke="#5da2ff" stroke-opacity="0.6" stroke-width="1925.9140811455848" stroke-linecap="square" stroke-linejoin="miter" stroke-miterlimit="10" d="M 127307 125743 L 238666.9967956543 125743 238666.9967956543 192678.99939346313 127307 192678.99939346313 Z"></path></g><path fill="#3D85C6" fill-opacity="1" stroke="#666666" stroke-opacity="1" stroke-width="762" stroke-linecap="butt" stroke-linejoin="round" stroke-miterlimit="8" d="M 127307 125743 L 238666.9967956543 125743 238666.9967956543 192678.99939346313 127307 192678.99939346313 Z"></path><path stroke="#000" stroke-opacity="0" stroke-width="2036.8496420047734" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" pointer-events="all" d="M 127307 125743 L 238666.9967956543 125743 238666.9967956543 192678.99939346313 127307 192678.99939346313 Z"></path></g><g id="editor-ged1ef149_06"><g></g><path fill="#FF0000" fill-opacity="1" d="M 36727.9988 250551.9999 C 46095.4988 239712.24990000002 55462.9988 232937.40615 64830.4988 230227.46865 L 55462.9988 212612.8749 C 67952.9988 205386.3749 80442.9988 205386.3749 92932.9988 212612.8749 L 83565.4988 230227.46865 C 92932.9988 232937.40615 102300.4988 239712.24990000002 111667.9988 250551.9999 L 102300.4988 176028.71865 111667.9988 120474.9999 C 105422.9988 113248.4999 99177.9988 107828.6249 92932.9988 104215.3749 L 92932.9988 82535.87489999998 C 80442.9988 75309.37489999998 67952.9988 75309.37489999998 55462.9988 82535.87489999998 L 55462.9988 104215.3749 C 49217.9988 107828.62489999998 42972.9988 113248.4999 36727.9988 120474.9999 L 46095.4988 176028.71865 Z"></path><path stroke="#000" stroke-opacity="0" stroke-width="2036.8496420047734" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" pointer-events="all" d="M 36727.9988 250551.9999 C 46095.4988 239712.24990000002 55462.9988 232937.40615 64830.4988 230227.46865 L 55462.9988 212612.8749 C 67952.9988 205386.3749 80442.9988 205386.3749 92932.9988 212612.8749 L 83565.4988 230227.46865 C 92932.9988 232937.40615 102300.4988 239712.24990000002 111667.9988 250551.9999 L 102300.4988 176028.71865 111667.9988 120474.9999 C 105422.9988 113248.4999 99177.9988 107828.6249 92932.9988 104215.3749 L 92932.9988 82535.87489999998 C 80442.9988 75309.37489999998 67952.9988 75309.37489999998 55462.9988 82535.87489999998 L 55462.9988 104215.3749 C 49217.9988 107828.62489999998 42972.9988 113248.4999 36727.9988 120474.9999 L 46095.4988 176028.71865 Z"></path><path fill="#cc0000" fill-opacity="1" d="M 64830.4988 208547.96865 L 64830.4988 230227.46865 55462.9988 212612.8749 C 67952.9988 205386.3749 80442.9988 205386.3749 92932.9988 212612.8749 L 83565.4988 230227.46865 83565.4988 208547.96865 C 77320.4988 206741.34365 71075.4988 206741.34365 64830.4988 208547.96865 Z"></path><path stroke="#000" stroke-opacity="0" stroke-width="2036.8496420047734" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" pointer-events="all" d="M 64830.4988 208547.96865 L 64830.4988 230227.46865 55462.9988 212612.8749 C 67952.9988 205386.3749 80442.9988 205386.3749 92932.9988 212612.8749 L 83565.4988 230227.46865 83565.4988 208547.96865 C 77320.4988 206741.34365 71075.4988 206741.34365 64830.4988 208547.96865 Z"></path><path stroke="#666666" stroke-opacity="1" stroke-width="762" stroke-linecap="butt" stroke-linejoin="round" stroke-miterlimit="8" d="M 36727.9988 250551.9999 L 46095.4988 176028.71865 36727.9988 120474.9999 C 42972.9988 113248.4999 49217.9988 107828.6249 55462.9988 104215.3749 L 55462.9988 82535.87489999998 C 67952.9988 75309.37489999998 80442.9988 75309.37489999998 92932.9988 82535.87489999998 L 92932.9988 104215.3749 C 99177.9988 107828.62489999998 105422.9988 113248.4999 111667.9988 120474.9999 L 102300.4988 176028.71865 111667.9988 250551.9999 C 102300.4988 239712.24990000002 92932.9988 232937.40615 83565.4988 230227.46865 L 92932.9988 212612.8749 C 80442.9988 205386.3749 67952.9988 205386.3749 55462.9988 212612.8749 L 64830.4988 230227.46865 C 55462.9988 232937.40615 46095.4988 239712.24990000002 36727.9988 250551.9999 Z M 55462.9988 212612.8749 L 55462.9988 104215.3749 M 92932.9988 104215.3749 L 92932.9988 212612.8749 M 64830.4988 208547.96865 L 64830.4988 230227.46865 M 83565.4988 230227.46865 L 83565.4988 208547.96865"></path><path stroke="#000" stroke-opacity="0" stroke-width="2036.8496420047734" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" pointer-events="all" d="M 36727.9988 250551.9999 L 46095.4988 176028.71865 36727.9988 120474.9999 C 42972.9988 113248.4999 49217.9988 107828.6249 55462.9988 104215.3749 L 55462.9988 82535.87489999998 C 67952.9988 75309.37489999998 80442.9988 75309.37489999998 92932.9988 82535.87489999998 L 92932.9988 104215.3749 C 99177.9988 107828.62489999998 105422.9988 113248.4999 111667.9988 120474.9999 L 102300.4988 176028.71865 111667.9988 250551.9999 C 102300.4988 239712.24990000002 92932.9988 232937.40615 83565.4988 230227.46865 L 92932.9988 212612.8749 C 80442.9988 205386.3749 67952.9988 205386.3749 55462.9988 212612.8749 L 64830.4988 230227.46865 C 55462.9988 232937.40615 46095.4988 239712.24990000002 36727.9988 250551.9999 Z M 55462.9988 212612.8749 L 55462.9988 104215.3749 M 92932.9988 104215.3749 L 92932.9988 212612.8749 M 64830.4988 208547.96865 L 64830.4988 230227.46865 M 83565.4988 230227.46865 L 83565.4988 208547.96865"></path><g direction="ltr"><g pointer-events="none" transform="matrix(381,0,0,380.99999999999994,59119.9988,140863.9374)"><g><g id="editor-ged1ef149_06-paragraph-0"><g><g class="sketchy-text-background"></g><g class="sketchy-text-content"></g></g></g></g><rect style="opacity: 0;"></rect><rect style="opacity: 1;"></rect></g><path d="M 59119.9988 140863.9374 L 59119.9988 140863.9374 59119.9988 148864.9374 59119.9988 148864.9374 Z" pointer-events="all"></path></g></g></g><path stroke="#0096fd" stroke-opacity="1" stroke-width="290.9785202863962" stroke-linecap="square" stroke-linejoin="miter" stroke-miterlimit="10" pointer-events="none" d="M 238747.87589498807 125848.21002386636 L 238747.87589498807 192773.26968973747 127303.10262529833 192773.26968973747 127303.10262529833 125848.21002386636 Z"></path><path stroke="#0096fd" stroke-opacity="1" stroke-width="290.9785202863962" stroke-linecap="square" stroke-linejoin="miter" stroke-miterlimit="10" d="M 182880 125848 L 182880 120029"></path><path fill="#0096fd" fill-opacity="1" stroke="#ffffff" stroke-opacity="1" stroke-width="290.9785202863962" stroke-linecap="square" stroke-linejoin="miter" stroke-miterlimit="10" d="M 1163.9140811455848 0 C 1163.9140811455848 642.811997130027 642.8119971300271 1163.9140811455848 7.126682895371086e-14 1163.9140811455848 -642.8119971300268 1163.9140811455848 -1163.9140811455845 642.8119971300271 -1163.9140811455848 1.4253365790742172e-13 -1163.9140811455848 -642.8119971300268 -642.8119971300273 -1163.9140811455845 -2.1380048686113256e-13 -1163.9140811455848 642.8119971300267 -1163.9140811455848 1163.9140811455845 -642.8119971300273 1163.9140811455848 -2.8506731581484343e-13" transform="translate(182880,120028.63961813843)"></path><path fill="#0096fd" fill-opacity="1" stroke="#ffffff" stroke-opacity="1" stroke-width="290.9785202863962" stroke-linecap="square" stroke-linejoin="miter" stroke-miterlimit="10" d="M -1163.9140811455848 1163.9140811455848 L -1163.9140811455848 -1163.9140811455848 1163.9140811455848 -1163.9140811455848 1163.9140811455848 1163.9140811455848 Z" transform="translate(182880,125848.21002386636)"></path><path fill="#0096fd" fill-opacity="1" stroke="#ffffff" stroke-opacity="1" stroke-width="290.9785202863962" stroke-linecap="square" stroke-linejoin="miter" stroke-miterlimit="10" d="M -1163.9140811455848 1163.9140811455848 L -1163.9140811455848 -1163.9140811455848 1163.9140811455848 -1163.9140811455848 1163.9140811455848 1163.9140811455848 Z" transform="translate(238747.87589498807,125848.21002386636)"></path><path fill="#0096fd" fill-opacity="1" stroke="#ffffff" stroke-opacity="1" stroke-width="290.9785202863962" stroke-linecap="square" stroke-linejoin="miter" stroke-miterlimit="10" d="M -1163.9140811455848 1163.9140811455848 L -1163.9140811455848 -1163.9140811455848 1163.9140811455848 -1163.9140811455848 1163.9140811455848 1163.9140811455848 Z" transform="translate(238747.87589498807,159310.73985680193)"></path><path fill="#0096fd" fill-opacity="1" stroke="#ffffff" stroke-opacity="1" stroke-width="290.9785202863962" stroke-linecap="square" stroke-linejoin="miter" stroke-miterlimit="10" d="M -1163.9140811455848 1163.9140811455848 L -1163.9140811455848 -1163.9140811455848 1163.9140811455848 -1163.9140811455848 1163.9140811455848 1163.9140811455848 Z" transform="translate(238747.87589498807,192773.26968973747)"></path><path fill="#0096fd" fill-opacity="1" stroke="#ffffff" stroke-opacity="1" stroke-width="290.9785202863962" stroke-linecap="square" stroke-linejoin="miter" stroke-miterlimit="10" d="M -1163.9140811455848 1163.9140811455848 L -1163.9140811455848 -1163.9140811455848 1163.9140811455848 -1163.9140811455848 1163.9140811455848 1163.9140811455848 Z" transform="translate(182880,192773.26968973747)"></path><path fill="#0096fd" fill-opacity="1" stroke="#ffffff" stroke-opacity="1" stroke-width="290.9785202863962" stroke-linecap="square" stroke-linejoin="miter" stroke-miterlimit="10" d="M -1163.9140811455848 1163.9140811455848 L -1163.9140811455848 -1163.9140811455848 1163.9140811455848 -1163.9140811455848 1163.9140811455848 1163.9140811455848 Z" transform="translate(127303.10262529833,192773.26968973747)"></path><path fill="#0096fd" fill-opacity="1" stroke="#ffffff" stroke-opacity="1" stroke-width="290.9785202863962" stroke-linecap="square" stroke-linejoin="miter" stroke-miterlimit="10" d="M -1163.9140811455848 1163.9140811455848 L -1163.9140811455848 -1163.9140811455848 1163.9140811455848 -1163.9140811455848 1163.9140811455848 1163.9140811455848 Z" transform="translate(127303.10262529833,159310.73985680193)"></path><path fill="#0096fd" fill-opacity="1" stroke="#ffffff" stroke-opacity="1" stroke-width="290.9785202863962" stroke-linecap="square" stroke-linejoin="miter" stroke-miterlimit="10" d="M -1163.9140811455848 1163.9140811455848 L -1163.9140811455848 -1163.9140811455848 1163.9140811455848 -1163.9140811455848 1163.9140811455848 1163.9140811455848 Z" transform="translate(127303.10262529833,125848.21002386636)"></path></g><defs><filter id="myblur" filterUnits="userSpaceOnUse"><feGaussianBlur in="SourceAlpha" stdDeviation="1524"></feGaussianBlur></filter></defs></svg>';
image.src = 'data:image/svg+xml,' + xml;
document.querySelector('#container').appendChild(image);
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
context.drawImage(image, 0, 0);
image.src = canvas.toDataURL();
答案 0 :(得分：6)
您需要将画布的尺寸设置为图像的尺寸。以下是fiddle的更新。
var canvas = document.createElement('canvas');
canvas.width = image.width;
canvas.height = image.height;
image.onload = function() {
var canvas = document.createElement('canvas');
canvas.width = image.width;
canvas.height = image.height;
var context = canvas.getContext('2d');
context.drawImage(image, 0, 0);
image.src = canvas.toDataURL();
}
添加image.onload可以在Firefox中使用。