¿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"); 
  • d3 fuerza dirigida gráfico hacia abajo fuerza simulación
  • Obtener BBox de un grupo de objects de Rafael?
  • Cómo empacar text dentro de svg rect
  • Hacer que el text SVG no se pueda seleccionar
  • ¿Cómo movería un patrón SVG con un elemento?
  • ¿Cómo centrar (horizontal y verticalmente) text a lo largo de un TextPath dentro de un arco usando d3.js?
  • JavaScript, SVG, HTML y CSS
  • Información sobre herramientas para círculos nesteds en layout de package circular D3
  • Diseño de fuerza d3js añadiendo dinámicamente la image o el círculo para cada nodo
  • Doblar SVG `<g>` alnetworkingedor de Curve
  • Usar JavaScript en una image de background svg
  • phantomjs lanzando la exception DOM 18 en canvas.toDataURL usando imágenes src
  • ¿Agrego eventListener a cada elemento SVG si sigo el modo D3 normal?
  • Javascript tiene muchos buenos JS marco (como Node.js AngularJS Vue.js React.js) es el mejor lenguaje de script.