SVG：文本显示在顶部和底部有间距答案

【问题标题】：SVG: Text show to have spacing at top and bottomSVG：文本显示在顶部和底部有间距
【发布时间】：2020-05-01 19:03:07
【问题描述】：

我正在使用 SVG 来显示一个剔除文本模板，以创建一个内部包含文本的矩形（通过蒙版）。我希望掩码文本匹配给定的大小并正确放大，以便负责的文本自动使用它所具有的宽度和高度。

对于较长的段落，这工作得很好，但是当文本内容不是那么长时，逻辑会将文本放大到其最大宽度/高度，直到它碰到边框。见截图。但我确实看到有我想摆脱的填充 - 我怎样才能使文本完全适合容器？

为了使其更清晰可见，我直接向 SVG 添加了一个文本元素，以便显示元素的大小。我怎样才能摆脱这个空白？

Example with purple boxes that show whitespace in text element

这是一个具有较长文本的示例，可以按预期工作：

<svg id="canvas-6" width="300px" height="75px" viewBox="0 0 300 75" xmlns="http://www.w3.org/2000/svg">
    <text transform="translate(0,0)" class="knockout-text-value" id="fit-hidden-6" fill="#000" x="50%" y="50%" width="100%" text-anchor="middle" dominant-baseline="central" font-family="'Lato', sans-serif" font-size="60.785146891139px">TEST TEST</text>
    <rect id="fit-text-6" class="knockout-text-bg" width="100%" height="100%" fill="red" x="0" y="0" fill-opacity="1" stroke="black" stroke-opacity="1" stroke-width="1" stroke-linecap="round" stroke-dasharray="5,5" mask="url(#knockout-text-6)"></rect>
    <mask id="knockout-text-6">
        <rect width="300px" height="100%" fill="#fff" stroke="#000" stroke-opacity="1" stroke-width="1" stroke-linecap="round" stroke-dasharray="5,5" x="0" y="0"></rect>
        <text transform="translate(0,0)" class="knockout-text-value" id="fit-mask-6" fill="#000" x="50%" y="50%" text-anchor="middle" dominant-baseline="central" font-family="'Lato', sans-serif" font-size="60.785146891139px">TEST TEST</text>
    </mask>
</svg>

这是一个在其 SVG 画布中仍有空白的示例：

<svg id="canvas-5" width="300px" height="134px" viewBox="0 0 300 134" xmlns="http://www.w3.org/2000/svg">
    <text transform="translate(0,0)" class="knockout-text-value" id="fit-hidden-5" fill="#000" x="50%" y="50%" width="100%" text-anchor="middle" dominant-baseline="central" font-family="'Lato', sans-serif" font-size="109.0909090909091px">TEST</text>
    <rect id="fit-text-5" class="knockout-text-bg" width="100%" height="100%" fill="red" x="0" y="0" fill-opacity="1" stroke="black" stroke-opacity="1" stroke-width="1" stroke-linecap="round" stroke-dasharray="5,5" mask="url(#knockout-text-5)"></rect>
    <mask id="knockout-text-5">
        <rect width="300px" height="100%" fill="#fff" stroke="#000" stroke-opacity="1" stroke-width="1" stroke-linecap="round" stroke-dasharray="5,5" x="0" y="0"></rect>
        <text transform="translate(0,0)" class="knockout-text-value" id="fit-mask-5" fill="#000" x="50%" y="50%" text-anchor="middle" dominant-baseline="central" font-family="'Lato', sans-serif" font-size="109.0909090909091px">TEST</text>
    </mask>
</svg>

【问题讨论】：

没有看到代码 - 它可能是任何东西。您能否发布一个显示问题的最小测试用例。
我加了两个例子
这些看起来完全一样 - 你能发布相关的 CSS 类吗？
不涉及 CSS - 因为属性直接在属性中。也许两次粘贴相同的 sn-p？

标签： javascript svg text

【解决方案1】：

尝试在 svg 上添加 { display: block }。

【讨论】：