viewBox
Аттрибут viewBox
определяет расположение и размеры окна отображения SVG.
Значение атрибута viewBox
— это набор четырёх чисел: min-x
, min-y
, width
и height
, — разделённых пробелами и/или запятой, которые задают прямоугольник в пользовательском пространстве, стороны которого определяют границы окна отображения элемента SVG (не браузера).
Пример
html, body, svg { height:100% } svg:not(:root) { display: inline-block; }
html
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<!--
С относительными единицами, такими как проценты,
размер квадрата не меняется в зависимости от
значения viewBox
-->
<rect x="0" y="0" width="100%" height="100%" />
<!--
При больших значениях viewBox круг получается
маленьким, потому что его радиус указан в абсолютных
единицах: расстояние 4 получается маленьким относительно
размера окна 100, указанного во viewBox
-->
<circle cx="50%" cy="50%" r="4" fill="white" />
</svg>
<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
<!-- Также не зависит от viewBox, как и в предыдущем примере -->
<rect x="0" y="0" width="100%" height="100%" />
<!--
С маленьким значением размера viewBox круг получается
большим, потому что радиус 4 намного больше, если размер
области отображения равен 10, чем если он равен 100
-->
<circle cx="50%" cy="50%" r="4" fill="white" />
</svg>
<svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg">
<!--
Точка с координатами (0, 0) теперь является центром области
отображения. 100% всё ещё приравнивается к полному размеру
области отображения (10 на 10), поэтому квадрат выглядит
сдвинутым в правый нижний угол
-->
<rect x="0" y="0" width="100%" height="100%" />
<!--
Так как точка (0, 0) находится в центре, а координаты круга,
равные 50%, относительно размера области отображения (10 на 10)
принимаются равными 5, круг оказывается с центром
в правом нижнем углу
-->
<circle cx="50%" cy="50%" r="4" fill="white" />
</svg>
На отображение с viewBox
также влияет атрибут preserveAspectRatio
.
Примечание: При значениях width
и height
меньших или равных 0
элемент не отображается
Пять элементов используют этот атрибут: <marker>
, <pattern>
, <svg>
, <symbol>
и <view>
.