JSFiddle - React, Tailwind, and code Playground

by Henry

HTML

translated
<svg viewBox="0 0 258 34" xmlns="http://www.w3.org/2000/svg">
    <text x="-2" y="26"><!-- << the question:
                                if these values weren't provided,
                                how would you calculate them? -->
        my sample text
    </text>
</svg>

not translated
<svg viewBox="0 0 258 34" xmlns="http://www.w3.org/2000/svg">
    <text id="untranslated"><!-- fwiw, the getBBox of the text without translation is
                                 somewhere around -33 - -34, depending on the svg's actual size -->
        my sample text
    </text>
</svg>

CSS

html {
  background: #ccc;
  padding: 20px;
}

text {
    fill: #000;
    fill-rule: evenodd;
    font-weight: 700;
    font-family: Helvetica-Bold, Helvetica;
    font-size: 36px
}
svg {
  background: #fff;
  outline: 1px solid red;
  overflow: hidden;
  margin-bottom: 20px
}

JavaScript

var bbox = $("#"+ "untranslated")[0].getBBox();
 alert('x: ' + bbox.x + ', y: ' + bbox.y);