时间戳

首页 > 解决方案 > 从 SVG 的顶部和底部删除空白空间元素

html - 从 SVG 的顶部和底部删除空白空间元素

问题描述

我有一个<text>包含单个数字字形的 SVG 元素，例如 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 字形顶部和底部的红色重叠的元素的高度。

<text> 元素检查

如果您想在代码游乐场中快速调出代码，我附上了一个JSFiddle 。

标签： htmlcsssvg

解决方案

推荐阅读