删除SVG <text>元素顶部和底部的空白区域

Question

我有一个SVG <text>元素，其中包含单个数字字形，例如1. font-size属性非常大：335像素。结果，在<text>元素的顶部和底部有足够的空间，我想删除。理想情况下，我希望<text>元素的高度与其父容器的高度相匹配，在本例中为<svg>。

我尝试弄乱dominant-baseline元素上的<text>属性无济于事，但是我似乎在网上找不到其他解决方案。

<svg width="200" height="250">
    <text x="0" y="220" fill="#f6f6f6" stroke="#fbb03b" stroke-width="2" font-size="335" font-family="Hind-Regular, Hind">
        1
    </text>
</svg>

下图显示了对<text>元素的检查。我想删除<text>元素的高度，该高度与1个字形顶部和底部的红色重叠。

如果您想在代码游乐场快速提取代码，请附加一个JSFiddle。