Блог

Главная - Вопросы по программированию - Понимание области просмотра SVG

Понимание области просмотра SVG

#svg #viewport

#svg #область просмотра

Вопрос:

Я пытаюсь понять область просмотра SVG. Почему эти три примера так отличаются?

 svg {
  border: 2px solid red;
} 
 <div>

  <svg>
    <rect x="0" y="0" width="100" height="100" fill="blue" />
  </svg>

  <svg width="200" height="200">
      <rect x="0" y="0" width="100" height="100" fill="blue" />
  </svg>

  <svg viewBox="0 0 200 200">
      <rect x="0" y="0" width="100" height="100" fill="blue" />
  </svg>

</div>

Комментарии:

1. Первый svg: по умолчанию имеет ширину = «300», высоту = «150» и поле просмотра для соответствия: 0 0 300 150. Второй svg имеет ширину = «200», высоту = «200» и поле просмотра для соответствия; 0 0 200 200. Третий svg имеет viewBox =»0 0 200 200″. Поскольку атрибуты width и height отсутствуют, они будут масштабироваться, чтобы занять всю доступную ширину — в данном случае 100 Вт. Соотношение сторон будет сохранено, и в этом случае высота будет такой же, как ширина, т.е. 100 Вт

Ответ №1:

  • В первом примере отсутствуют ширина и высота. В спецификации CSS говорится, что замененные элементы, в которых отсутствуют значения ширины и высоты, возвращаются к 300px x 150px, чтобы вы видели верхний левый 300 x 150 пикселей того, что вы рисуете на холсте.
  • Второй пример имеет ширину и высоту, чтобы вы могли видеть эту часть холста.
  • В третьем примере также нет ширины / высоты, но, как ни странно, теперь мы будем использовать значения пробелов 100% x 100% для ширины / высоты, потому что у нас есть полезное соотношение сторон из окна просмотра. Окно просмотра также масштабирует внутреннюю систему координат 200 x 200 для закрепления на этом холсте, чтобы все выглядело больше.