gpt4 book ai didi

javascript - 如何使用 d3.js 将文本在 svg 图像上居中?

转载 作者:行者123 更新时间:2023-12-03 02:11:59 24 4
gpt4 key购买 nike

我正在尝试放置文本,使其位于元素的中心,如下图所示: enter image description here

我希望根据图像的大小动态完成此操作。

我该怎么做?

  <body>
<script type="text/javascript">
const svg = d3.select("body").append("svg").attr("width",1000).attr("height",1000);
var widthMarker=50;
var img = svg.append("svg:image")
.attr("xlink:href", "marker.svg")
.attr("width", widthMarker)
.attr("height", widthMarker)
.attr("x", 228)
.attr("y",53);

svg.append("text").attr("width",100).attr("height",100).text("hello world");



</script>
</body>

http://plnkr.co/edit/39zEvnjOmotZXYF2GFwq?p=preview

最佳答案

您可以简单地将图像和文本放在一个组容器中,然后相对调整文本位置,如下所示。

Plunker

const svg = d3.select("body")
.append("svg")
.attr("width", 1000)
.attr("height", 1000);

var widthMarker = 50;

var imgContainer = svg.append("g")
.attr("transform", "translate(228,53)");

var img = imgContainer.append("svg:image")
.attr("xlink:href", "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQgfLDf_0gBVxWp_7ec2UR3Dro5rBXquElgRdSH6K8LQQ7QanSQ")
.attr("width", widthMarker)
.attr("height", widthMarker);

var text = imgContainer.append("svg:text")
.attr("dy", widthMarker/2)
.text("hello world");

text.attr("dx", (widthMarker - text.node().getComputedTextLength()) / 2);
<script src="https://d3js.org/d3.v3.min.js"></script>

关于javascript - 如何使用 d3.js 将文本在 svg 图像上居中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49525192/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com