D3.js SVG 图像边界框偏移答案

【问题标题】：D3.js SVG image bounding box offsetD3.js SVG 图像边界框偏移
【发布时间】：2016-10-11 23:47:37
【问题描述】：

我正在尝试使用 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() 玩过游戏，但我似乎无法获得我正在寻找的值。

【问题讨论】：

标签： javascript html d3.js svg

【解决方案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>

【讨论】：