¿Hay un equivalente del método toDataURL de canvas para SVG?

Estoy tratando de cargar una image svg en el canvas para la manipulación de píxeles Necesito un método como toDataURL o getImageData para svg

en Chrome / Safari puedo intentar hacerlo a través de la image y el canvas

 var img = new Image() img.onload = function(){ ctx.drawImage(img,0,0) //this correctly draws the svg image to the canvas! however... var dataURL = canvas.toDataURL(); //SECURITY_ERR: DOM Exception 18 var data = ctx.getImageData(0,0,img.width, img.height).data //also SECURITY_ERR: DOM Exception 18 } img.src = "image.svg" //that is an svg file. (same domain as html file :)) 

Pero tengo errores de security. ¿Cualquier otra manera?

Aquí hay una demostración en vivo del problema http://clstff.appspot.com/gist/462846 (puede ver la fuente)

4 Solutions collect form web for “¿Hay un equivalente del método toDataURL de canvas para SVG?”

De: http://www.svgopen.org/2009/papers/12-Using_Canvas_in_SVG/#d4e105

La razón por la que no puede usar un elemento de image SVG como fuente para el método drawImage es simple, pero doloroso: la especificación Canvas actual no permite (todavía) hacer reference a SVGImageElement como fuente para drawImage y solo puede manejar HTMLImageElement, HTMLCanvasElement y HTMLVideoelement. Se espera que esta breve respuesta se aborde durante el process de definición del comportamiento "SVG en HTML5" y podría extenderse para permitir SVGSVGElement también. El elemento xhtml: img en el listdo 3 usa visibilidad: oculto porque no queremos que interfiera con su copy visible en el canvas.

 var dataUrl = 'data:image/svg+xml,'+encodeURIComponent(svgString); 

Sí, no puedes hacer eso directamente, pero puedes usar canvg para eso, es decir, para dibujar SVG en Canvas y get URL de datos de Canvas. No es sin errores, especialmente para el procesamiento de degradados complejos, pero tuve una experiencia positiva con él.

primero descargue una biblioteca js svg_todataurl.js e inclúyala

luego solo pega este código

 var SVGtopngDataURL = document.getElementById("svg_element_id").toDataURL("image/png"); 
  • La directiva AngularJS no se llama
  • Agregar estilo css al convertir svg a png
  • Chartist.js: aumenta el espacio entre los puntos de escala del eje Y
  • Gire el control deslizante de animation pero al mover el mouse al deslizar -> cancelar
  • D3 force nodos y enlaces de representación gráfica
  • ¿Por qué google map usa Canvas para hacer mediciones de distancia, no SVG?
  • Pixi js cómo renderizar svg
  • Scripting <path> data en SVG (lectura y modificación)
  • ¿Cómo obtengo el ancho de un elemento svg usando d3js?
  • Hacer que los charts de Highcharts.js se vean bien en dispositivos mobilees y de escritorio
  • Dibujar un polígono festoneado entre múltiples puntos
  • Javascript tiene muchos buenos JS marco (como Node.js AngularJS Vue.js React.js) es el mejor lenguaje de script.