Question

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

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

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>

Answer 1

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

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

.tspanGroup

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");

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

1 个答案: