Добавьте dominant-baseline="hanging" к вашим .tspanGroup и alignment-baseline="middle" к вашим <tspan> с.Это исправит базовое поведение текстовых элементов.
Чтобы увидеть влияние значений по умолчанию на измененные значения, измените y -значение вашего .tspanGroup на 0 в вашей ручке ифрагмент в этом ответе.Вы увидите, что текст течет по верхнему краю в вашем примере, а начинается с края на моем.
console.log("Start");
function setTspan(elem, fontFamily, fontSize, fontStyle) {
// Set font family?
if (fontFamily) {
elem.attr("font-family", fontFamily);
}
// Set font size?
if (fontSize) {
elem.attr("font-size", fontSize);
}
// Set font style?
if (fontStyle) {
elem.attr("font-style", fontStyle);
}
}
function centerText() {
// Get tspan group.
var textBox = $("#textBox1");
var tspanGroup = textBox.children(".tspanGroup");
// Set font styles.
var fontSize = 30;
var fontFamily = "Open-Sans";
var fontStyle = "";
tspanGroup.each(function(){
setTspan($(this), fontFamily, fontSize, fontStyle);
});
// Get heights.
var textBoxHeight = textBox[0].getBoundingClientRect().height;
var tspanGroupClientRect = tspanGroup[0].getBoundingClientRect();
// Update text
var newY = textBoxHeight/2 - tspanGroupClientRect.height/2
tspanGroup.attr("y", newY);
// Print results
console.log("Text box height: " + textBoxHeight + ". Tspan group height: " + tspanGroupClientRect.height + ". New Y: " + newY + ".");
}
centerText();
console.log("Done");
html, body {
margin: 0;
padding: 20px;
}
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<svg id="rootBox" width="375" height="812" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<style type="text/css">@import url('https://fonts.googleapis.com/css?family=Lato|Open+Sans|Oswald|Raleway|Roboto|Indie+Flower|Gamja+Flower')</style>
<svg id="textBox1" class="textBox" x="0" y="0" width="100%" height="25%">
<rect class="background" x="0%" y="0%" width="100%" height="100%" fill="gray" fill-opacity="0.5" />
<text class="tspanGroup" dominant-baseline="hanging" x="50%" y="50%"><tspan x="50%" dy="0" text-anchor="middle" alignment-baseline="hanging">tspan line 0</tspan><tspan x="50%" dy="1.5em" text-anchor="middle" alignment-baseline="hanging">tspan line 1</tspan><tspan x="50%" dy="1.5em" text-anchor="middle" alignment-baseline="hanging">tspan line 2</tspan></text>
</svg>
</svg>