D3.js SVG 이미지 경계 상자 오프셋

Question

D3.js를 사용하여 svg 이미지로 div를 채우려고합니다. 지금까지 브라우저 창을 확대하고 축소하면서 이미지를 중앙에 배치하고 크기를 조절할 수있었습니다. 그러나 이미지의 테두리 상자를 동적으로 찾으려고 할 때 캔버스의 왼쪽 위 및 왼쪽 속성과 원본 이미지뿐 아니라 모든 공간의 너비를 찾을 수 있습니다.

여기에 기본 모의 내 문제의 업입니다 :이 예에서는 정사각형 이미지의 왼쪽 상단 위치를 찾을 수있는 방법을 이 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>

그래서 내 질문은? .offset(), .getBBox()를 사용하여 연극을 했었지만 찾고있는 값을 얻을 수없는 것 같습니다.

Answer 1

당신의 접근 방식은 효과가 없을 것입니다. 이미지 너비/높이를 100%으로 설정하면 이미지 요소는 항상 [0,0]에 배치됩니다. 당신은 이미지가 표시되도록 할 방법의 픽셀 크기를 알고 있다면, 당신은 같은 것을 할 수 있습니다

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>