csssvgmathmlforeignobject

MathML in standalone SVG - how to center elements

I'm trying to create a standalone SVG image with embedded MathML. I want the MathML to be centered both vertically and horizontally at a certain location, but can't figure out how to make that happen.

Here's the baseline I'm working with:

<svg height="80" width="80" viewBox="0 0 80 80" stroke="black" stroke-width="2" fill="none" xmlns="http://www.w3.org/2000/svg">
  <rect x="10" y="10" height="60" width="60"></rect>
  <foreignObject x="10" y="10" height="60" width="60">
    <body xmlns="http://www.w3.org/1999/xhtml">
      <math display="block" xmlns="http://www.w3.org/1998/Math/MathML">
        <mi>X</mi>
      </math>
    </body>
  </foreignObject>
</svg>

This centers the X horizontally but not vertically:

enter image description here

I've tried a variety of CSS style properties to center vertically, like this example, but none have been successful:

    <body
      style="
        margin: 0;
        display: grid;
        align-items: center;
        justify-content: center;
        height: inherit;
      "
      xmlns="http://www.w3.org/1999/xhtml">
      <math display="block" xmlns="http://www.w3.org/1998/Math/MathML">
        <mi>X</mi>
      </math>
    </body>

(somewhat notably, if I add a <div> inside the <body> element to contain the above style properties, it works on http://svgviewer.dev/ but not in any browser ¯\_(ツ)_/¯).

Solution 

  • <svg width="80" height="80" xmlns="http://www.w3.org/2000/svg">
  <rect x="10" y="10" width="60" height="60" stroke="black" stroke-width="2" fill="none" />
  <foreignObject x="10" y="10" width="60" height="60">
    <div xmlns="http://www.w3.org/1999/xhtml"
         style="width:60px; height:60px; display:flex; justify-content:center; align-items:center; box-sizing:border-box;">
      <math xmlns="http://www.w3.org/1998/Math/MathML" display="block">
        <mi>X</mi>
      </math>
    </div>
  </foreignObject>
</svg>

    Remove <body> and </body> tags. it's not required and it can confuse the layout.