使用SVG文本时，字体太小，会使文本变空；显示的文本大小不随字体大小而改变

Question

我正在使用SVG将一些lat-lons映射为折线。这管用。我现在要添加一些适当的可缩放大小的文本。

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

<?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。我不得不改变视图框的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>