中心SVG组元素

Question

我试图居中g其元素text与tspan内svg利用元素d3使用下面的代码。

 var rootSVGSize = d3.select("svg.root-svg").node().getBoundingClientRect() var dataLabelSize = d3.select("g.data-label").node().getBoundingClientRect() var x = rootSVGSize.width / 2; var y = rootSVGSize.height / 2; d3.select("g.data-label").attr("transform", "translate(" + x + "," + y + ")") 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script> <svg class="root-svg" width="180" height="200" style="border: black;border-style: solid;border-width: 1px;"> <g class="data-label"> <text alignment-baseline="middle" style="font-family: Arial; font-size: 36px; font-style: normal; font-weight: normal; fill: rgb(242, 200, 15);" text-anchor="middle"> <tspan x="0" dy="0">1/1/2018</tspan> <tspan x="0" dy="41">3:00:00</tspan> <tspan x="0" dy="41">AM</tspan> </text> <title>1/1/2018 3:00:00 AM</title> </g> </svg> 

如您在执行上述代码后所看到的，group元素未正确地在x和y坐标上居中。 如何在SVG中使组元素居中？

我正在使用getBoundingClientRect因为我想在分配width和height之后在初始阶段获取svg大小，这是在svg内部重新放置任何东西之前的结果。

Answer 1

您必须考虑SVG容器和组的x和y位置：

var x = (rootSVGSize.x - dataLabelSize.x) + (rootSVGSize.width - dataLabelSize.width) / 2;
var y = (rootSVGSize.y - dataLabelSize.y) + (rootSVGSize.height - dataLabelSize.height) / 2;

这样，您可以为alignment-baseline ， dominant-baseline和text-anchor设置任何值，这无关紧要，该组将始终居中。

这是您所做的更改的代码：

 var rootSVGSize = d3.select("svg.root-svg").node().getBoundingClientRect() var dataLabelSize = d3.select("g.data-label").node().getBoundingClientRect() var x = (rootSVGSize.x - dataLabelSize.x) + (rootSVGSize.width - dataLabelSize.width) / 2; var y = (rootSVGSize.y - dataLabelSize.y) + (rootSVGSize.height - dataLabelSize.height) / 2; d3.select("g.data-label").attr("transform", "translate(" + x + "," + y + ")") 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script> <svg class="root-svg" width="180" height="200" style="border: black;border-style: solid;border-width: 1px;"> <g class="data-label"> <text alignment-baseline="middle" style="font-family: Arial; font-size: 36px; font-style: normal; font-weight: normal; fill: rgb(242, 200, 15);" text-anchor="middle"> <tspan x="0" dy="0">1/1/2018</tspan> <tspan x="0" dy="41">3:00:00</tspan> <tspan x="0" dy="41">AM</tspan> </text> <title>1/1/2018 3:00:00 AM</title> </g> </svg> 

Answer 2

我对svg做了一些更改，这是最重要的：我已经更改了tspan的dy一些值。 另外，我使用的是dominant-baseline="middle"而不是alignment-baseline="middle" 。 希望对您有所帮助。

 var rootSVGSize = d3.select("svg.root-svg").node().getBoundingClientRect() var dataLabelSize = d3.select("g.data-label").node().getBoundingClientRect() var x = rootSVGSize.width / 2; var y = rootSVGSize.height / 2; d3.select("g.data-label").attr("transform", "translate(" + x + "," + y + ")") 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script> <svg class="root-svg" width="180" height="200" style="border: black;border-style: solid;border-width: 1px;"> <g class="data-label"> <text dominant-baseline="middle" style="font-family: Arial; font-size: 36px; font-style: normal; font-weight: normal; fill: rgb(242, 200, 15);" text-anchor="middle"> <tspan x="0" dy="-41">1/1/2018</tspan> <tspan x="0" dy="41">3:00:00</tspan> <tspan x="0" dy="41">AM</tspan> </text> <title>1/1/2018 3:00:00 AM</title> </g> </svg>