konvertieren SVG Ellipse Bild in Vanilla JavaScript

Question

Hey Leute ich folgende SVG mit Ellipse in sie bekommen haben:

 <svg xmlns="http://www.w3.org/2000/svg" version="1.1" 
xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16"> 
      <ellipse cx="50%" cy="50%" rx="50%" ry="50%" fill="#fefefe"></ellipse> 
     </svg> 

Ich möchte die oben umzuwandeln (die übrigens im String-Format ist) in ein Bild so dass ich es dann mit putImageData im Canvas verwenden kann. Jede Hilfe würde sehr geschätzt werden.

Answer 1

Da ein <canvas> Element es nicht erlaubt, dass <svg> direkt darauf gezeichnet wird, müssen Sie es zuerst zu einem konvertieren.

Dies ist ein ziemlich einfacher Prozess eine (kurze) Anzahl von Schritten:

Platz der SVG in ein Bild. Dies kann getan werden, indem Sie eine erstellen und .src auf eine Daten-URL, die das SVG enthält, setzen.

var svg = document.querySelector('svg'), 
    img = document.createElement('img'); 

img.src = 'data:image/svg+xml;utf8,' + svg.outerHTML; 

Dies kann ein wenig komplizierter sein, wenn die SVG-Zeichen enthalten werden Sie entkommen müssen (vor allem ein # kann böse sein).

Legen Sie das Bild auf die Leinwand. Ein Canvas hat eine context, die ermöglicht, dass (und andere, aber nicht <svg>) hineingezogen werden.

var canvas = document.createElement('canvas'), 
    ctx = canvas.getContext('2d'); 

// now that we have the SVG nicely embedded in an image, we can 
// use the image to size the canvas 
canvas.width = img.width; 
canvas.height = img.height; 

// and draw the image onto the canvas (in the top/left corder) 
// using the context 
ctx.drawImage(img, 0, 0); 

a working fiddle for you to play with

---

Da die Frage sich mit svg-filters und diese wird markiert benötigen die #, die Zuordnung von img.src zu so etwas wie neu schreiben möchten:

img.src = svg.outerHTML.replace(/#/g, '%23');