У меня есть элемент SVG <text>, который содержит глиф с одним числом, например 1. Атрибут font-size довольно большой: 335px. В результате в верхней и нижней части элемента <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 глифа.
element inspection">
I ' мы прикрепили JSFiddle , если вы хотите быстро открыть код на игровой площадке кода.