D3.js SVG Bild Bounding Box Offset

Question

Ich versuche, ein Div mit einem Svg-Bild mit D3.js zu füllen. Bis jetzt war ich in der Lage, mein Bild zu zentrieren und es zu skalieren, während ich das Browserfenster vergrößern und verkleinern konnte. Wenn ich jedoch versuche, die Begrenzungsbox des Bildes dynamisch zu finden, kann ich nur die oberen, linken Eigenschaften der Zeichenfläche und die Breite des gesamten Platzes und nicht nur mein Originalbild finden.

Hier ist eine einfache Mock-up von meinem Problem: http://jsfiddle.net/wnwfn/79/

d3.select("#svgEmbed").append("image") 
 
    .attr("xlink:href","http://www.clipartkid.com/images/32/square-clip-art-black-and-white-clipart-panda-free-clipart-images-UkJ6sF-clipart.png") 
 
    .attr("width", "100%") 
 
    .attr("height", "100%") 
 

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.3.12/d3.min.js"></script> 
 
<p> 
 
    <svg id="svgEmbed" height="100%" width="100%" ></svg> 
 
</p>

Also meine Frage ist, wie kann ich die obere linke Position des quadratischen Bildes in diesem Beispiel finden? Ich hatte ein Spiel mit der .offset(), .getBBox(), aber ich kann nicht scheinen, die Werte, die ich suche.

Answer 1

Ihr Ansatz wird nicht funktionieren. Wenn Sie die Bildbreite/-höhe auf 100% einstellen, wird das Bildelement immer auf [0,0] positioniert. Wenn Sie die Pixelgröße wissen, wie Sie das Bild angezeigt werden soll, können Sie etwas tun:

var imgSize = 150; 
 
var img = d3.select("#svgEmbed") 
 
    .append("image") 
 
    .attr("xlink:href", "http://www.clipartkid.com/images/32/square-clip-art-black-and-white-clipart-panda-free-clipart-images-UkJ6sF-clipart.png") 
 
    .attr("x", "50%") 
 
    .attr("width", imgSize) 
 
    .attr("height", imgSize) 
 
    .attr("transform", "translate(" + (-imgSize/2) + ", 0)"); 
 

 
d3.select(window).on("resize", function(){ 
 
    console.log(img.node().getBBox()); 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> 
 
<p> 
 
    <svg id="svgEmbed" height="100%" width="100%"></svg> 
 
</p>