글꼴 요소를 지원하는 HTML5 캔버스에서 SVG 그리기

Question

글꼴 요소를 지원하는 SVG를 HTML 캔버스로 변환하기위한 훌륭한 라이브러리가 있습니까? 이미 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를 읽을 수 없습니다. 나는이 테스트하고 작동 (동일한 보이는) IE9, 크롬 v11b, 사파리 V5 및 파이어 폭스 V4에 있다는 것을 확인했습니다 http://phrogz.net/tmp/canvas_from_svg.html
:

나는 내 서버에이 기술의 예를 넣었습니다.

[편집] 참고 :

1. 크롬과 파이어 폭스는 현재 보안에 대한 '펀트'와 캔버스 당신이 어떤 SVG를 그리는 후 (예 : getImageData() 또는 toDataURL())을 읽는 당신을 허용 (에 관계없이 도메인의) 캔버스는 these have been fixed

2. 파이어 폭스는 현재 버그 wher있다 SVG에 height과 width 속성이 지정되어 있지 않으면 SVG를 캔버스에 그릴 수 없습니다.

   경우

Answer 2

당신은 SVG는 HTML에 삽입 한 또는 원시 소스로 당신은 당신이 다음 캔버스에 그릴 수있는 HTML 이미지 요소에 SVG를 변환하는 데이터 URL을 사용할 수 있습니다

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 태그, Phrogs의 방법과 canvg를 시도했다. 내 SVG에는 PNG가 임베드되어 있습니다. 그것은 단지 canvg에서 일했습니다. 다른 사람들은 임베디드 PNG가없는 이미지를 보여주었습니다. 표준 브라우저 또는 Chrome이있는 Android Jellybean에 있습니다.