Dessin d'un fichier SVG sur un HTML5 canvas

Question

Est-il un défaut de dessin d'un fichier SVG sur un HTML5 canvas? Google Chrome prend en charge le chargement du SVG est une image (et simplement à l'aide d' drawImage), mais le développeur de la console de n'avertir que resource interpreted as image but transferred with MIME type image/svg+xml.

Je sais qu'une possibilité serait de convertir le SVG pour toile de commandes (dans cette question), mais j'espère que ce n'est pas nécessaire. Je n'ai pas de soins sur les navigateurs plus anciens (donc si FireFox 4 et internet explorer 9 sera l'appui de quelque chose, c'est assez bon).

Answer 1

EDIT du 8 avril 2014

Vous pouvez maintenant utiliser ctx.drawImage pour dessiner HTMLImageElements qui ont une .svg source dans certains mais pas tous les navigateurs. Chrome et IE11 travail, Firefox nightly ne fonctionne pas encore.

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";

Live exemple ici. Vous devriez voir un carré vert sur la toile. Le deuxième carré vert sur la page est le même <svg> élément inséré dans le DOM pour référence.

Vous pouvez également utiliser la nouvelle Path2D objets à dessiner SVG (string) chemins (ne fonctionne que dans google Chrome, maintenant). En d'autres termes, vous pouvez écrire:

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

Exemple vivant d'ici.

---

Vieux la postérité réponse:

Il n'y a rien natif qui permet d'utiliser SVG en natif chemins dans la toile. Vous devez convertir vous-même ou utiliser une bibliothèque pour le faire pour vous.

Je vous suggère de regarder dans canvg:

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

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

Answer 2

il existe un moyen simple pour le dessin SVG sur toile

https://developer.mozilla.org/en-US/docs/HTML/Canvas/Drawing_DOM_objects_into_a_canvas

Answer 3

Comme Simon dit ci-dessus, à l'aide de drawImage ne devrait pas fonctionner. Mais, à l'aide de la canvg bibliothèque et:

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

Cela vient de la liaison Simon fournit ci-dessus, qui a un certain nombre d'autres suggestions et des points que vous voulez le lien, ou le télécharger canvg.js et rgbcolor.js. Ceux-ci vous permettent de manipuler et charger un SVG, soit via l'URL ou en ligne SVG code entre les balises svg, dans des fonctions JavaScript.