Рисуем SVG на холсте HTML5 с поддержкой элемента font

Ответ 1

Браузеры, поддерживающие 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 v4.

[Изменить] Обратите внимание:

• Chrome и Firefox в настоящее время "punt" в безопасности и запрещают вам читать холст (например, getImageData() или toDataURL()) после того, как вы нарисуете любой SVG на холст (независимо от домена) они были исправлены

• В настоящее время Firefox имеет ошибку, в которой он отказывается рисовать SVG на холсте, если у SVG нет атрибутов height и width.

Ответ 2

Если у вас есть 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);

Ответ 3

Я просто попробовал простой тег img, метод Phrogs и canvg. Мой SVG имеет встроенный PNG. Это только работало в canvg. Остальные показали изображение без встроенного PNG. Это было на Android Jellybean с помощью стандартного браузера или Chrome.