С SVG Text размер шрифта слишком мал, он очищает текст; отображаемый размер текста не изменяется в зависимости от размера шрифта - PullRequest
Новая
       11

С SVG Text размер шрифта слишком мал, он очищает текст; отображаемый размер текста не изменяется в зависимости от размера шрифта

1 голос
/ 15 апреля 2019

Я использую 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>

1 Ответ

1 голос
/ 22 апреля 2019

Как вы, наверное, поняли из комментариев, вам нужно увеличить размер всего в вашем SVG. В следующем примере я умножил все на 100. Мне пришлось изменить х viewBox, потому что в противном случае буква 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>

Пожалуйста, не используйте очень маленькие цифры.

...