Рисование SVG-файла на холсте HTML5

есть ли способ по умолчанию рисовать SVG-файл на холсте HTML5? Google Chrome поддерживает загрузку SVG в виде изображения (и просто с помощью drawImage), но консоль разработчика предупреждает, что resource interpreted as image but transferred with MIME type image/svg+xml.

Я знаю, что можно было бы преобразовать SVG в команды canvas (например, в этот вопрос), но я надеюсь, что это не нужно. Я не забочусь о старых браузерах (так что если FireFox 4 и IE 9 будут поддерживать что-то, это достаточно хорошо).

5 87
svg html5 canvas

5 ответов:

редактировать 5 ноября 2014

теперь вы можете использовать ctx.drawImage чтобы нарисовать HTMLImageElements, которые имеют a .источник СВГ в некоторых, но не во всех браузерах. Chrome, IE11 и Safari работают, Firefox работает с некоторыми ошибками (но nightly исправил их).

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 (string) (работает только в Chrome прямо сейчас). Другими словами, вы можете написать:

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

живой пример этого здесь.

старый потомство ответ:

нет ничего родного, что позволяет вам изначально использовать пути SVG в canvas. Вы должны преобразовать себя или использовать библиотеку, чтобы сделать это для вас.

Я бы предложил заглянуть в canvg:

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

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

76

вы можете легко нарисовать простой svg s на холст по:

  1. назначение источник предназначен для работы в составе изображение в формате 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/>
16

Извините, у меня недостаточно репутации, чтобы прокомментировать ответ @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/>
9

Mozilla имеет простой способ для рисования SVG на холсте под названием" рисование объектов DOM на холсте"

7

как Саймон говорит выше, использование drawImage не должно работать. Но, используя библиотеку canvg и:

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

это происходит из ссылки, которую Саймон предоставляет выше, в которой есть ряд других предложений и указывает, что вы хотите либо перейти по ссылке, либо загрузить canvg.js и rgbcolor.js. Они позволяют управлять и загружать SVG, либо через URL-адрес, либо с помощью встроенного кода SVG между тегами svg, в функциях JavaScript.

4