Svg And Jquery: Multiple Lines Of Text Will Not Center Despite Correct Calculations

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 th

Solution 1:

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.

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


functionsetTspan(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);
  }
}


functioncenterText() {  
  // 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 textvar newY = textBoxHeight/2 - tspanGroupClientRect.height/2
  tspanGroup.attr("y", newY);
  
  // Print resultsconsole.log("Text box height: " + textBoxHeight + ". Tspan group height: " + tspanGroupClientRect.height + ". New Y: " + newY + ".");
}


centerText();


console.log("Done");

html, body {
  margin: 0;
  padding: 20px;
}

<!DOCTYPE svgPUBLIC"-//W3C//DTD SVG 1.1//EN""http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><svgid="rootBox"width="375"height="812"xmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink"><styletype="text/css">@import url('https://fonts.googleapis.com/css?family=Lato|Open+Sans|Oswald|Raleway|Roboto|Indie+Flower|Gamja+Flower')</style><svgid="textBox1"class="textBox"x="0"y="0"width="100%"height="25%"><rectclass="background"x="0%"y="0%"width="100%"height="100%"fill="gray"fill-opacity="0.5" /><textclass="tspanGroup"dominant-baseline="hanging"x="50%"y="50%"><tspanx="50%"dy="0"text-anchor="middle"alignment-baseline="hanging">tspan line 0</tspan><tspanx="50%"dy="1.5em"text-anchor="middle"alignment-baseline="hanging">tspan line 1</tspan><tspanx="50%"dy="1.5em"text-anchor="middle"alignment-baseline="hanging">tspan line 2</tspan></text></svg></svg>