SVG:如何在元素内将多行文本均匀居中? [英] SVG: how to center multiple lines of text evenly inside of element?

问题描述

此答案和

This answer and this answer explain how to show multiple lines of text and how to center one line of text with SVG, but how do you center multiple lines of text?

您可以从此电笔，由于dy属性(显示多行需要使用该属性)，因此文本块未居中.

As you can see from this Code Pen, the text block is not centered because of the dy attribute, which is needed to display multiply lines.

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

The goal is to allow dynamic insertion/deletion of lines while preserving the centered nature of the text block. So the user might add a fourth line or delete two lines. In both cases, the text block should remain centered.

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

One approach is to modify the dy values each time a line is removed/inserted as some suggested, but is there a non-JS approach to vertically centering a block of text?

<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>

推荐答案

这就是我的工作方式:我将所有内容都围绕SVG画布的中心居中，并使用dy

This is how I would do it:I'm centring everything around the center of the SVG canvas and I'm offsetting the first and the last line with 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对此进行了评论:更新了问题，以反映对动态插入/删除行的需求.

The OP commented that they: updated the question to reflect the need for dynamic insert/deletion of lines.

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

In this case I would put the whole text inside a group and I would use the bounding box of the group to center the text:

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

The red circle I've added is just in order to see the center of the SVG canvas.

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:如何在元素内将多行文本均匀居中?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！