HTML5 캔버스에 SVG 파일 그리기

HTML5 캔버스에 SVG 파일 그리기

---

HTML5 캔버스에 SVG 파일을 그리는 기본 방법이 있습니까? Chrome은 SVG를 이미지로로드하는 것을 지원 drawImage하지만 (을 사용하여 간단하게 ) 개발자 콘솔은 경고합니다 resource interpreted as image but transferred with MIME type image/svg+xml.

SVG를 캔버스 명령으로 변환 할 가능성이 있음을 알고 있지만 ( 이 질문 과 같이 ) 필요하지 않기를 바랍니다. 구형 브라우저는 신경 쓰지 않습니다 (FireFox 4와 IE 9가 무언가를 지원한다면 충분합니다).

---

2014 년 11 월 5 일 수정

일부 브라우저ctx.drawImage 에는 .svg 소스가있는 HTMLImageElements를 그리는 데 사용할 수 있습니다 . Chrome, IE11 및 Safari가 작동하면 Firefox는 일부 버그와 함께 작동하지만 야간에는 버그가 수정되었습니다.

var img = new Image();
img.onload = function() {
    ctx.drawImage(img, 0, 0);
}
img.src = "http://upload.wikimedia.org/wikipedia/commons/d/d2/Svg_example_square.svg";

여기에 실례가 있습니다 . 캔버스에 녹색 사각형이 나타납니다. 페이지의 두 번째 녹색 사각형은 참조 <svg>를 위해 DOM에 삽입 된 것과 동일한 요소입니다.

새로운 Path2D 객체를 사용하여 SVG (문자열) 경로를 그릴 수도 있습니다 ( 현재 Chrome에서만 작동 ). 즉, 다음과 같이 쓸 수 있습니다.

var path = new Path2D('M 100,100 h 50 v 50 h 50');
ctx.stroke(path);

여기에 실례가 있습니다.

---

오래된 후손 답변 :

기본적으로 캔버스에서 SVG 경로를 사용할 수있는 기본 요소는 없습니다. 직접 변환하거나 라이브러리를 사용해야합니다.

canvg를 살펴 보는 것이 좋습니다.

http://code.google.com/p/canvg/

http://canvg.googlecode.com/svn/trunk/examples/index.htm

---

다음과 같이 간단한을 svg캔버스에 쉽게 그릴 수 있습니다 .

1. svg의 소스를 base64 형식의 이미지에 지정
2. 캔버스에 이미지 그리기

참고 : 이 방법의 유일한 단점은에 포함 된 이미지를 그릴 수 없다는 것 svg입니다. (데모 참조)

데모:

(포함 된 이미지는에서만 볼 수 있습니다. svg)

var svg = document.querySelector('svg');
var img = document.querySelector('img');
var canvas = document.querySelector('canvas');

// get svg data
var xml = new XMLSerializer().serializeToString(svg);

// make it base64
var svg64 = btoa(xml);
var b64Start = 'data:image/svg+xml;base64,';

// prepend a "header"
var image64 = b64Start + svg64;

// set it as the source of the img element
img.src = image64;

// draw the image onto the canvas
canvas.getContext('2d').drawImage(img, 0, 0);

svg, img, canvas {
  display: block;
}

SVG

<svg height="40">
  <rect width="40" height="40" style="fill:rgb(255,0,255);" />
  <image xlink:href="https://en.gravatar.com/userimage/16084558/1a38852cf33713b48da096c8dc72c338.png?size=20" height="20px" width="20px" x="10" y="10"></image>
</svg>
<hr/><br/>

IMAGE
<img/>
<hr/><br/>
   
CANVAS
<canvas></canvas>
<hr/><br/>

---

죄송합니다, @Matyas 답변에 대한 의견이 충분하지 않지만 svg의 이미지가 base64에 있으면 출력으로 그려집니다.

데모:

var svg = document.querySelector('svg');
var img = document.querySelector('img');
var canvas = document.querySelector('canvas');

// get svg data
var xml = new XMLSerializer().serializeToString(svg);

// make it base64
var svg64 = btoa(xml);
var b64Start = 'data:image/svg+xml;base64,';

// prepend a "header"
var image64 = b64Start + svg64;

// set it as the source of the img element
img.onload = function() {
    // draw the image onto the canvas
    canvas.getContext('2d').drawImage(img, 0, 0);
}
img.src = image64;

svg, img, canvas {
  display: block;
}

SVG

<svg height="40">
  <rect width="40" height="40" style="fill:rgb(255,0,255);" />
  <image xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAEX0lEQVQ4jUWUyW6cVRCFv7r3/kO3u912nNgZgESAAgGBCJgFgxhW7FkgxAbxMLwBEmIRITbsQAgxCEUiSIBAYIY4g1EmYjuDp457+Lv7n+4tFjbwAHVOnVPnlLz75ht67OhhZg/M0p6d5tD9C8SNBBs5XBJhI4uNLC4SREA0UI9yJr2c4e6QO+v3WF27w+rmNrv9Pm7hxDyHFg5yYGEOYxytuRY2SYiSCIwgRgBQIxgjEAKuZWg6R9S0SCS4qKLZElY3HC5tp7QPtmlMN7HOETUTXBJjrEGsAfgPFECsQbBIbDGJZUYgGE8ugQyPm+o0STtTuGZMnKZEjRjjLIgAirEOEQEBDQFBEFFEBWLFtVJmpENRl6hUuFanTRAlbTeZarcx0R6YNZagAdD/t5N9+QgCYAw2jrAhpjM3zaSY4OJGTDrVwEYOYw2qioigoviq5MqF31m9fg1V5fCx+zn11CLNVnufRhBrsVFE1Ihpthu4KDYYwz5YQIxFBG7duMZnH31IqHL6wwnGCLFd4pez3/DaG2/x4GNPgBhEZG/GGlxkMVFkiNMYay3Inqxed4eP33uf7Y0uu90xWkGolFAru7sZn5w5w921m3u+su8vinEO02hEWLN/ANnL2rkvv2an2yd4SCKLM0JVBsCgAYZZzrnPP0eDRzXgfaCuPHXwuEYjRgmIBlQVVLl8/hKI4fRzz3L6uWe5+PMvnHz6aa4uX+D4yYe5vXaLH86eoyoLjLF476l9oKo9pi5HWONRX8E+YznOef7Vl1h86QWurlwjbc+QpikPPfoIcZLS39pmMikp8pzae6q6oqgriqrGqS+xeLScoMYSVJlfOMTl5RXW1+5w5fJVnFGWf1/mxEMnWPppiclkTLM5RdJoUBYFZVlQ5DnZMMMV167gixKLoXXsKGqnOHnqOJ/+/CfZ+XUiZ0jTmFv5mAvf/YjEliQ2vPD8Ir6qqEcZkzt38cMRo5WruFvfL9FqpyRxQhj0qLOax5I2S08+Tu/lFiGUGOPormxwuyfMnjrGrJa88uIixeYWl776lmrzNjmw8vcG8sU7ixpHMXFsCUVg9tABjEvRgzP82j7AhbyiX5Qcv2+Bvy7dYGZ1k7efeQB/Y4PBqGBtdYvb3SFzLcfqToZc/OB1zYeBSpUwLBlvjZidmWaSB1yaYOfn6LqI/r0hyU6P+cRSlhXjbEI2zvnt7y79oqQ3qeg4g6vKjCIXehtDmi6m0UnxVnCRkPUHVNt9qkLJxgXOCYNOg34v48raPaamU2o89/KKsQ9sTSpc0JK7NwdcX8s43Ek5cnSOLC/Z2R6Rj0ra0w2W1/t0xyWn51uk2Ri1QtSO6OU5d7OSi72cQeWxKG7p/Dp//JXTy6C1Pcbc6DMpPRtjTxChEznWhwVZUCKrjCrPoPDczHLmnLBdBgZlRRWUEBR3ZKrme5TlrTGlV440Y1IrXM9qQGi6mkG5V6uza7tUIeCDElTZ1L26elX+fcH/ACJBPYTJ4X8tAAAAAElFTkSuQmCC" height="20px" width="20px" x="10" y="10"></image>
</svg>
<hr/><br/>

IMAGE
<img/>
<hr/><br/>
   
CANVAS
<canvas></canvas>
<hr/><br/>

---

모질라라는 캔버스에 SVG를 그리기위한 간단한 방법이있다 " 그리기 DOM 캔버스에 개체 "

---

Simon이 위에서 말했듯이 drawImage를 사용하면 작동하지 않습니다. 그러나 canvg 라이브러리를 사용하여 다음을 수행하십시오 .

var c = document.getElementById('canvas');
var ctx = c.getContext('2d');
ctx.drawSvg(SVG_XML_OR_PATH_TO_SVG, dx, dy, dw, dh);

This comes from the link Simon provides above, which has a number of other suggestions and points out that you want to either link to, or download canvg.js and rgbcolor.js. These allow you to manipulate and load an SVG, either via URL or using inline SVG code between svg tags, within JavaScript functions.

참고URL : https://stackoverflow.com/questions/3768565/drawing-an-svg-file-on-a-html5-canvas