使用 SVG 文本字体大小有点太小，它会使文本空白；显示的文字大小不随字体大小改变

Question

我正在使用 SVG 将一些经纬度映射为折线。这行得通。我现在想以适当的可缩放大小添加一些文本。

此简化示例应显示三个不同大小的字母。 Firefox 仅显示 2 个，每个大小相同。 Chrome、Opera 和 Edge 都没有显示字母。有一些线显示字母应该在哪里，所以我知道它在视口内。

Firefox 不会以任何小于字体大小“.0084”的值显示中心字母。我还没有找到任何适用于其他浏览器的值。

我试过使用“%”、"px" 和 [none] 的单位来获得 "user coordinates." 运气不好。

<?xml version="1.0" encoding="UTF-8" ?>
<svg viewBox="-77.48874 -43.03 .06 .06" xmlns="http://www.w3.org/2000/svg">
  <text x="-77.50" y="-43.01447" font-size=".0084">X</text>
  <text x="-77.48" y="-43.01447" font-size=".0083">E</text>
  <text x="-77.46" y="-43.01447" font-size=".0200">S</text>

  <line x1="-77.48" y1="-43.01447" x2="-77.9" y2="-43.01447" 
    stroke-width="1%" stroke="#00ff00" />
  <line x1="-77.46" y1="-43.01447" x2="-77.46" y2="-43.81446" 
    stroke-width="1%" stroke="teal"/>
  <line x1="-77.48" y1="-43.01447" x2="-77.48" y2="-43.81446" 
    stroke-width="1%" stroke="teal"/>
  <line x1="-77.50" y1="-43.01447" x2="-77.50" y2="-43.81446" 
    stroke-width="1%" stroke="teal"/>
</svg>

Answer 1

您可能已经从评论中了解到，您需要增加 SVG 中所有内容的大小。在下一个示例中，我将所有内容乘以 100。我必须更改 viewBox 的 x，否则字母 X 会落在外面。

<svg viewBox="-7750.5 -4303 6 6" xmlns="http://www.w3.org/2000/svg">
  <text x="-7750" y="-4301.447" font-size=".84">X</text>
  <text x="-7748." y="-4301.447" font-size=".83">E</text>
  <text x="-7746" y="-4301.447" font-size="2">S</text>

  <line x1="-7748" y1="-4301.447" x2="-7790" y2="-430144.7" 
    stroke-width="1%" stroke="#00ff00" />
  <line x1="-7746" y1="-4301.447" x2="-7746" y2="-4381.446" 
    stroke-width="1%" stroke="teal"/>
  <line x1="-7748" y1="-4301.447" x2="-7748" y2="-4381.446" 
    stroke-width="1%" stroke="teal"/>
  <line x1="-7750" y1="-4301.447" x2="-7750" y2="-4381.446" 
    stroke-width="1%" stroke="teal"/>
</svg>

请不要使用极小的数字。

使用 SVG 文本字体大小有点太小，它会使文本空白；显示的文字大小不随字体大小改变

With SVG Text font-size a little too small it blanks text; displayed text size does not change with font-size

svg

text

font-size