SVG和jQuery:尽管计算正确，但多行文本不会居中

问题描述

该代码应该在更改某些字体属性后使文本垂直居中.

This code is supposed to center the text vertically after changing some font properties.

计算看起来是正确的，但是由于某种原因，文本没有按计算结果所要求的那样被压低，从而导致文本偏离中心.

The calculations look correct, but for some reason, the text isn't pushed down as far as the calculations say they should, causing the text to be off-center.

Codepen: https://codepen.io/anon/pen/NepNjb?editors = 1111

这是什么原因造成的?

<!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" x="50%" y="50%"><tspan x="50%" dy="0" text-anchor="middle">tspan line 0</tspan><tspan x="50%" dy="1.5em" text-anchor="middle">tspan line 1</tspan><tspan x="50%" dy="1.5em" text-anchor="middle">tspan line 2</tspan></text>
    </svg>

</svg>

推荐答案

添加 dominant-baseline="hanging" 到.tspanGroup和 alignment-baseline="middle" 到您的<tspan> s.这将修复文本元素的基线行为.

Add dominant-baseline="hanging" to your .tspanGroup and alignment-baseline="middle" to your <tspan>s. This will fix the baseline-behaviour of the text elements.

要查看默认值与更改后的值的影响，请在笔中将.tspanGroup的y值更改为0，并在此答案中将代码段更改为.从示例的上边缘开始，您将看到文本从上边缘流过.

To see the effect of the default values versus the altered values, change the y-value of your .tspanGroup to 0 in your pen and the snippet in this answer. You will see that the text flows over the upper edge in your example, while starting at the edge on mine.

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>

这篇关于SVG和jQuery:尽管计算正确，但多行文本不会居中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！