Рисовать изображение размером SVG в HTML-холсте в Firefox

Я хочу нарисовать изображение SVG с измененным размером на холст HTML.Рисовать изображение размером SVG в HTML-холсте в Firefox

Он отлично работает в 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

Я хотел бы иметь изменения размера Изображение SVG обращено без пикселизации в Firefox, как в Chromium.

В настоящее время я помещаю <img/> сверху на холст, чтобы получить изображение SVG без пикселизации, но это довольно медленно, потому что есть много изображений.

источник

2013-05-31 antoyo

Вы считали, что просто рисуете круг (ы), используя собственный холст api: context.arc (x, y, radius, 0, Math.PI * 2, false)? Многие из примитивных форм SVG также доступны в холсте - даже пути легко конвертировать. – markE

Это всего лишь пример. Я хочу сделать более сложные изображения SVG. – antoyo

Это отличный вопрос, который показывает, что движок рендеринга Gecko Firefox мгновенно преобразует SVG в растровое изображение, тогда как Webkit сохраняет его как SVG и визуализирует его напрямую, когда это необходимо. Это объясняет, почему мой SVG шириной 20000 единиц не мог отображаться в Firefox, даже когда он был нарисован на 400 пикселей в ширину. Он отлично работал на вебките. –

Наконец-то я нашел способ рисования SVG с измененным размером на холсте в Firefox. Идея заключается в том, чтобы получить источник SVG с помощью AJAX и изменить SVG с помощью JavaScript что-то вроде:

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 .: Если есть альтернатива jQuery для document.createElementNS, я хотел бы знать.

источник

2013-06-02 00:11:53 antoyo

Рисовать изображение размером SVG в HTML-холсте в Firefox

ответ

Смежные вопросы