在Firefox中的HTML畫布中繪製調整大小的SVG圖像

我想將調整大小的SVG圖像繪製到HTML畫布上。在Firefox中的HTML畫布中繪製調整大小的SVG圖像

它在Chromium中正常工作，但在Firefox中無法正常工作。在Firefox中，圖像是像素化的。

這裏是SVG圖像：

<?xml version="1.0" encoding="UTF-8" standalone="no"?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="200" height="200" viewbox="0 0 200 200"> 
    <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/> 
</svg>

這裏是代碼：

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Resized SVG in Canvas</title> 
     <meta charset="utf-8"/> 

     <script> 
     window.addEventListener('load', function() { 
      var canvas = document.getElementById('canvas'), 
       context = canvas.getContext('2d'), 
       image = new Image(); 
      image.src = 'circle1.svg'; 
      image.height = 400; 
      image.width = 400; 

      image.addEventListener('load', function() { 
       try { 
        context.drawImage(image, 0, 0, 400, 400); 
       } 
       catch(error) { 
        console.log(error); 
       } 
      }, false); 
     }, false); 
     </script> 
    </head> 
    <body> 
     <canvas height="600" id="canvas" width="600"></canvas> 
    </body> 
</html>

結果是：

enter image description here

我想有調整在Firefox中使用像素化繪製的SVG圖像，如Chromium中所示。

目前，我把<img/>放在畫布的頂部以獲得沒有像素化的SVG圖像，但由於存在大量圖像，所以速度很慢。

來源

2013-05-31 antoyo

您是否考慮過使用本地畫布api繪製圓：context.arc（x，y，radius，0，Math.PI * 2，false）？許多SVG原始形狀也可以在畫布中使用 - 即使路徑也很容易轉換。 – markE

這只是一個例子。我想繪製更復雜的SVG圖像。 – antoyo

這一個很大的問題，顯示的是Firefox的Gecko渲染引擎立即SVG轉換爲位圖，而Webkit的保持它作爲SVG並在需要時直接呈現它。這就解釋了爲什麼我的20000單位寬的SVG即使在繪製400像素寬的時候也無法在Firefox中渲染。它在webkit上運行良好。 –

我終於找到了一種在Firefox的畫布上繪製調整大小的SVG的方法。這個想法是讓通過AJAX SVG源代碼，並通過JavaScript的東西，如改變SVG：

var transformTag; 

transformTag = $(document.createElementNS('http://www.w3.org/2000/svg', 'g')) 
    .attr('transform', 'scale(' + scaleX + ', ' + scaleY + ')'); 

svgElement.attr({ 
    'height': dh, 
    'viewbox': '0 0 ' + dw + ' ' + dh, 
    'width': dw 
}) 
    .wrapInner(transformTag);

這裏是一個jsFiddle（沒有AJAX，但它是簡單的改變）。

由於修改和圖像創建速度很慢，我添加了一個簡單的緩存機制（未在小提琴中顯示，但又一次，它很容易實現），速度非常快。它可以在Chromium，Firefox和Opera中使用（但由於某些原因，小提琴在Opera中不起作用，儘管它在我的開發服務器中工作）。

P.S .:如果有一個替代document.createElementNS的jQuery，我想知道。

來源

2013-06-02 00:11:53 antoyo

在Firefox中的HTML畫布中繪製調整大小的SVG圖像

回答

相關問題