在支持字體元素的HTML5畫布上繪製SVG

是否有一個用於將SVG轉換爲支持字體元素的HTML畫布的好庫？我已經嘗試過canvg，但它不支持Font。在支持字體元素的HTML5畫布上繪製SVG

2011-03-31 Seeker

支持HTML5 Canvas的瀏覽器也很好地支持SVG。因此，你可以這樣做：

var img = new Image; 
img.onload = function(){ myCanvasContext.drawImage(img,0,0); }; 
img.src = "foo.svg";

唯一的缺點這種方法是，如果SVG是你的域之外的畫布將成爲污點;如果這是您的目標，您將無法使用getImageData()來讀取所產生的SVG。

，我已經把我的服務器上這種技術的一個例子：http://phrogz.net/tmp/canvas_from_svg.html
我測試過這一點，並驗證了它的工作原理（和看起來一樣）上IE9，Chrome的V11B，Safari瀏覽器V5和Firefox 4版。

[編輯]需要注意的是：

~~Chrome和Firefox目前的安全 '平底船'，並從閱讀畫布（如 getImageData()或 toDataURL()）繪製任何 SVG後不允許你畫布（不管域名）~~ these have been fixed
Firefox目前有一個錯誤e除非SVG指定了height和width屬性，否則它拒絕將SVG繪製到畫布上。

來源

2011-03-31 20:25:04 Phrogz

這不適用於firefox – Nilesh 2011-05-02 19:00:45

@Nilesh什麼操作系統和FireFox的版本？它適用於我在Windows 7上使用FF4.0。 – Phrogz 2011-05-02 19:45:55

我在JavaScript中有一個svg作爲字符串。我使用它像'img.src =「data：image/svg + xml，」+ svgString;'它使用chrome，但firefox拒絕解析'svgString'變量，因爲我嵌入了CDATA樣式。更新：使用encodeURIComponent（svgString）解決 – arunkjn 2013-11-21 13:17:39

如果你已經在SVG嵌入到HTML或作爲原料源可以使用一個數據的URL到SVG轉換爲您然後可以在畫布上繪製一個HTML圖像元素：

var img = new Image(); 
// here attach an onload handler that draws the image on the canvas 

// svgSource is the raw svg xml 
img.src = "data:image/svg+xml," + encodeURIComponent(svgSource);

來源

2013-04-27 16:54:46 imagiro

請注意，對於複雜的SVG內容，可能會遇到數據的大小限制：URI - 在我的情況下，這意味着我沒有除了使用canvg來繪製複雜的SVG之外的其他選項。 – 2014-08-01 09:34:30

我剛試過一個簡單的img標籤，Phrogs的方法和canvg。我的SVG有一個嵌入式PNG。這隻適用於canvg。其他人展示了沒有嵌入PNG的圖像。這是在Android Jellybean上使用標準瀏覽器或Chrome。

來源

2013-05-23 09:22:28 Adrian

在支持字體元素的HTML5畫布上繪製SVG

回答

相關問題