SVG неравномерно масштабируется в Firefox с использованием тега <img> - PullRequest
Новая
       1

SVG неравномерно масштабируется в Firefox с использованием тега <img>

0 голосов
/ 14 декабря 2018

У меня есть следующий SVG-файл: 

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
     width="100%" height="19">
    <rect x="0" y="0" width="100%" height="100%" fill="black" />
    <text font-size="13" font-family="monospace" x="3" y="13" fill="#b2b2b2">Hello world</text>
</svg>

Если я просматриваю этот файл непосредственно в Firefox, он выглядит нормально:

Good-looking screenshot

Если я добавлю его на страницу с помощью тега <img>, он будет выглядеть сжатым. 

<html>
    <body>
        <img src="screenshot.svg" width="100%">
    </body>
</html>

Bad-looking screenshot

Что бы я хотелЭто происходит, когда черный фон масштабируется на всю ширину, а текст остается незаполненным.Я перепробовал все перестановки viewBox и preserveAspectRatio, которые я могу придумать, но ни одна из них, кажется, не дает желаемого эффекта.Хром, кажется, показывает это хорошо.

1 Ответ

0 голосов
/ 15 декабря 2018

Это, на мой взгляд, должно быть помечено как ошибка.Кажется, что происходит то, что либо при использовании функции масштабирования браузера, либо при заранее заданном увеличении из-за экрана с высоким DPI значение в процентах или относительно области просмотра (vw, vh) остается на том же вычисленном размере пикселя, в то время как pxи другие значения единиц умножаются на значение масштабирования.Пока все хорошо.

Кажется, что в Firefox для <img> значений witdth и height это всегда приводит к неравномерному масштабированию его содержимого, не сохраняя пропорции, даже для SVG-содержимого, которое обычно подходитсам в окне просмотра в соответствии с preserveAspectRatio правилами.

Я вижу два пути решения этой проблемы;оба должны точно установить высоту.Обратите внимание, что я протестировал это на обычном экране с помощью функции масштабирования браузера.Я надеюсь, что он работает так же на вашем экране с высоким DPI.

  • встраивает изображение SVG в страницу HTML с помощью встроенного тега <svg>, содержащего элемент SVG <image>: 

    <html>
  <body style="margin:0">
    <svg width="100%" height="19px">
      <image width="100%" height="100%" href="screenshot.svg" />
    </svg>
  </body>
</html>

  • использовать SVG в качестве фонового изображения: 

    <html>
  <body style="margin:0">
    <div style="background:url(screenshot.svg) left no-repeat;width:100%;height:19px;">
  </body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...