SECURITY_ERR：DOM調用畫布的DataURL方法時出現異常18

Question

在嘗試從其上正在工作的Internet Explorer和Safari瀏覽器上繪製SVG圖像的畫布上檢索數據URL時，出現以下錯誤。

此外，SVG圖像包含一些<image>元素，其xlink:href屬性設置爲從用戶文件系統讀取的圖像作爲數據URL。由於這些圖像並不位於不同的域，所以我想不出爲什麼在嘗試獲取繪製SVG圖像的canvas的dataURL時拋出此錯誤的原因。提前致謝。

SECURITY_ERR：DOM異常18：試圖通過 打破用戶代理的安全策略「

Answer 1

我可以用一個測試案例確認在Internet Explorer 11這個問題我。製作：
http://jsfiddle.net/tsbXW/

這是微軟正在開發Internet Explorer的一個已知的限制：
https://connect.microsoft.com/IE/feedback/details/828416/cavas-todataurl-method-doesnt-work-after-draw-svg-file-to-canvas

正如表明的錯誤報告，任何繪製成畫布 SVG圖像玷污畫布，引起SecurityError時toDataURL（）被調用。

值得一提的是，臭蟲報告的test case在Safari 7.0.5中無法正常工作（雖然據說蘋果已經在Safari 8中解決了這個問題）。另外，由於Bug 672013 - Allow SVG-as-an-image to be drawn into a canvas without marking it as write-only，測試用例在版本11之前不能在Firefox中運行。

Answer 2

看來你的SVG正在違反安全策略，即使它們不應該。

一個可能的解決方案是使用canvg，它解析SVG並直接渲染到畫布。

如果您有SVG文本，canvg會添加一個drawSvg方法，其工作方式與drawImage一樣。 樣品：

的

var c = document.getElementById('canvas'); 
var ctx = c.getContext('2d'); 
ctx.drawSvg(SVG_XML_OR_PATH_TO_SVG, dx, dy, dw, dh);