使用SVG Text字体大小太小，它会使文本空白;显示的文本大小不会随font-size而改变

Question

我正在使用SVG将一些lat-lons映射为折线。这有效。我现在想以适当的可扩展大小添加一些文本。

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

对于font-size，Firefox不会以比“.0084”更小的值显示中心字母。我没有找到任何适用于其他浏览器的值。

我尝试使用“％”，“px”和[none]单位来获取“用户坐标”。没运气。

<?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>

请不要使用极小的数字。