时间戳

首页 > 解决方案 > SVG 文本元素不可见

html - SVG 文本元素不可见

问题描述

基本上我想将SVG画布映射到 -1..1 并在画布上打印一些文本。

没有请求映射的简单示例是：

  <style>
   .text {font: 14pt sans-serif; fill: red;}
  </style>
<svg class="text" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<text x="0" y="14pt">TEXT</text>
</svg>

我想要的是这段代码来显示文本：

  <style>
   .text {font: 14pt sans-serif; fill: red;}
  </style>
<svg class="text" viewBox="-1 -1 2 2" xmlns="http://www.w3.org/2000/svg">
<text x="0" y="0">TEXT</text>
</svg>

正如我从MDN了解到的，画布的中心将位于 0,0。我希望文本字符串打印在中心（实际上在零点之上）。我肯定错过了这个问题。你能帮助我吗？

标签： htmlsvg

解决方案

正如我所评论的：您的字体太大：14pt 与 svg 画布的大小：宽度：2，高度：2。为了理解会发生什么，我将 svg 画布居中在窗口中间（带有银色边框的小方块）并添加overflow:visible;，以便您可以看到文本。

.text {font: 14pt sans-serif; fill: red;}
svg{
border:1px solid silver;
width:25px;
height:25px;
display:block;
margin:auto;
position:absolute;
left:0;right:0;top:0;bottom:0;
overflow:visible;
}
<svg class="text" viewBox="-1 -1 2 2" xmlns="http://www.w3.org/2000/svg">
<text x="0" y="0">TEXT</text>
</svg>

您的问题的解决方案是设置更大的 viewBox 和更小的字体大小。您可能很想为您拥有的 viewBox 使用非常小的字体大小 (-1 -1 2 2)。请阅读这篇文章：SVG 中数字的限制

推荐阅读