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

Question

Есть ли хорошая библиотека для преобразования SVG в HTML canvas, которая поддерживает элемент font?Я уже пробовал canvg , но он не поддерживает шрифт.

Answer 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.

[Edit] Обратите внимание:

1. В настоящее время Chrome и Firefox «защищаются» и не позволяют вам читать холст (например, getImageData() или toDataURL()) после того, как вы нарисовали любой SVG на холсте (независимо от домена) они были исправлены

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

Answer 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);

Answer 3

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