Question

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

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

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>

请请不要使用非常小的数字。

如果SVG Text字体大小太小，则会使文本空白。显示的文字大小不会随着字体大小而改变

1 个答案: