d3.js 添加图像与锚中心不按预期工作

6ljaweal 于 2023-05-18 发布在其他

关注(0)|答案(1)|浏览(135)

下面的代码把图像放在（50，50），锚点在左上角。我怎么能改变锚点到图像中心，图像尺寸可能会改变，所以如果只是改变（50，50）到（0，0）将工作为这个图像，但不工作，如果图像尺寸改变。
我尝试添加锚到中心，但不工作。

var svg = d3.select('body')
.append('svg')
.attr('width',100)
.attr('height',100)
.style('border','1px solid red')
.attr('transform','translate(0,0)')

svg.append("image")
  .attr("xlink:href", "https://dummyimage.com/100x100/ececec/000000")
  .attr("x", 50)
  .attr("y", 50)
  .attr('anchor','center')

<script src="https://unpkg.com/d3@7.0.4/dist/d3.min.js"></script>

d3.js

来源：https://stackoverflow.com/questions/74491847/add-image-with-anchor-center-not-work-as-expected

1条答案

按热度按时间

mf98qq941#

根据MDN documentation for SVG Image，image没有anchor属性。* 在 * SVG最初布局之后，您可以使用获取SVG的大小和图像的大小并手动执行。大概是这样的：

let s = d3.select(svg);
let svg_width = s.attr("width");
let svg_height = s.attr("height");

let img = s.select("image").node();
let rect = img.getBoundingClientRect();
let img_width = rect.right - rect.left;
let img_height = rect.bottom - rect.top;

img.setAttribute("x", (svg_width - img_width)/2)
img.setAttribute("y", (svg_height - img_height)/2)

赞(0）回复(0）举报 2023-05-18

我来回答

d3.js 添加图像与锚中心不按预期工作

1条答案

相关问题

热门标签

最新问答