Question

This answer和this answer解释了如何显示多行文本以及如何使用SVG居中一行文本，但是如何居中显示多行文本？

从this Code Pen中可以看到，由于dy属性的存在，文本块没有居中。

目标是允许动态插入/删除行，同时保留文本块的居中性质。因此，用户可以添加第四行或删除两行。在两种情况下，文本块都应居中。

一种方法是每次删除/插入一行时都建议修改dy值，但是是否有非JavaScript方法将文本块垂直居中？

<svg style="border:1px solid black" width="200" height="300">
    <text x="50%" y="50%" font-size="15">
        <tspan x="0" dy="1.2em" dominant-baseline="central">tspan line 1</tspan>
        <tspan x="0" dy="1.2em" dominant-baseline="central">tspan line 2</tspan>
        <tspan x="0" dy="1.2em" dominant-baseline="central">tspan line 3</tspan>
    </text>
</svg>

Answer 1

这就是我要这样做的方式：我将所有内容围绕SVG画布的中心居中，并使用dy

偏移了第一行和最后一行

text{text-anchor:middle;dominant-baseline:central;}

<svg style="border:1px solid black" width="200" height="300">
    <text x="50%" y="50%" font-size="15">
        <tspan x="100" y="150" dy="-1.2em" >tspan line 1</tspan>
        <tspan x="100" y="150" >tspan line 2</tspan>
        <tspan x="100" y="150" dy="1.2em" >tspan line 3</tspan>
    </text>
</svg>

更新

OP对此进行了评论：更新了该问题，以反映对动态插入/删除行的需求。

在这种情况下，我会将整个文本放在一个组中，并使用该组的边界框将文本居中：

我添加的红色圆圈只是为了查看SVG画布的中心。

let bb = txt.getBBox(); console.log()
let X = 100;
let Y = 150 - bb.y - (bb.height)/2;
txt.setAttributeNS(null,"transform",`translate(${X},${Y})`)

text{text-anchor:middle;dominant-baseline:central;font-size:15;}

<svg style="border:1px solid black" width="200" height="300">
 <text id="txt"><!--
--><tspan x="0" y="0">tspan line 1</tspan><!--
--><tspan x="0" y="1.2em">tspan line 2</tspan><!--
--><tspan x="0" y="2.4em" >tspan line 3</tspan><!--
--><tspan x="0" y="3.6em" >tspan line 4</tspan>
 </text>
<circle cx="100" cy="150" r="3" fill="red"/>
</svg>

SVG：如何在元素内将多行文本均匀居中？

1 个答案:

更新