將內聯SVG轉換爲PNG時的樣式錯誤

我的高級別目標是將包含幾個內聯svg圖像的<div>元素轉換爲PNG文件。所有操作必須在客戶端瀏覽器中使用JavaScript執行。我曾嘗試：將內聯SVG轉換爲PNG時的樣式錯誤

使用canvg庫及繼起的這個職位的步驟：https://github.com/niklasvh/html2canvas/issues/95#issuecomment-34439223

原SVG：

結果：
將css樣式展平成<svg>標記，然後調用canvg，按照以下步驟從這篇文章：Convert embedded SVG to PNG in-place

結果：空白圖像。
壓扁CSS樣式到<svg>標籤並手動繪製SVG到畫布上，以下從這個主題的步驟： how to save/ export inline SVG styled with css from browser to image file

結果：空白圖像。 http://spin.atomicobject.com/2014/01/21/convert-svg-to-png/

結果：：空白圖像
使用此代碼壓扁CSS樣式到一個內聯樣式表。
使用svg crowbar手動將<div>元素下載爲.svg文件。

結果：

然後當我比較反對下載SVG原SVG的計算CSS，我發現下載的SVG有正確的SVG XML，但不正確的內嵌樣式表（<style type="text/css">）例如，編號200，300最右邊的圖中，他們繪製<text x="214" dy=".32em" y="0" style="text-anchor: start;">200</text>，在我的外部CSS，我有：

.scatterChart .axisGraphicsContext文字{ 字體大小：8像素; 填：＃777; }

但是，下載的svg的內聯樣式表中沒有字體大小和填充屬性。

2014-07-24 evenstar

我一直在尋找一種解決方案來導出通過Rickshaw（基於D3）創建的CSS的PNG導出解決方案。我發現的唯一的解決辦法是：

治療從SVGs不同的DIV，並把他們都單獨
與html2canvas轉換的DIV（和其他非SVG內容）到畫布
使CSS內聯到SVG; @thirdcreed發佈了JavaScript代碼和D3選擇器：Rickshaw CSS/Axes in JSDOM - 根據需要將其修改爲您的自定義CSS。

轉換SVGs到畫布代碼如

var imgsrc = 'data:image/svg+xml;base64,'+ btoa(html2); 
var img = '<img src="'+imgsrc+'">';  
var canvas = document.querySelector("canvas"), 
context = canvas.getContext("2d");  
var image = new Image; 
image.src = imgsrc; 
image.onload = function() { 
    context.drawImage(image, 0, 0); 
}

合併不同的畫布，你必須進入一個

轉換爲圖像的代碼，如：

var canvasdata = canvas.toDataURL("image/png"); 
var pngimg = '<img src="'+canvasdata+'">'; 
d3.select("#pngdataurl").html(pngimg); // contains selector from D3, adjust if you don't use D3 
var a = document.getElementById("some_anchor"); // Fix for Firefox: supply an anchor-tag here that is 'display:none' in your document, otherwise download won't work 
a.download = "sample.png"; 
a.href = canvasdata; 
a.click();

請注意，每個瀏覽器都期望Internet Explorer要求SVG具有xmlns屬性。

來源

2015-01-19 12:48:58 HumanInDisguise

將內聯SVG轉換爲PNG時的樣式錯誤

回答

相關問題