SVG:文本显示为顶部和底部有间距
SVG:文本显示为顶部和底部有间距
提问于 2020-05-02 03:03:08
我正在使用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>回答 1
Stack Overflow用户
发布于 2020-10-13 02:40:15
尝试在svg上添加{ display: block }。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/61549050
复制相关文章
相似问题
腾讯云开发者
