Вычисляет ли svg другие элементы вне окна просмотра?

Question

У меня есть несколько объектов, перемещающихся за пределы окна просмотра SVG в React. Ради оптимизации хотелось бы их условно отрендерить. Таким образом, объекты снаружи не будут отображаться. Но я спрашиваю себя, действительно ли это нужно. Вычисляет ли SVG то, что находится за пределами окна просмотра?

_{Свободный перевод вопроса Does a svg compute outside of viewbox? от участника @user13583939.}

Answer 1

Браузер вычисляет для рендеринга всё что находится за пределами окна просмотра. Вычисляет, но не показывает в окне просмотра. Поэтому вопрос актуален только в смысле производительности рендеринга. Если часть очень большого файла svg с большим количеством мелких деталей находится вне окна просмотра, то рендеринг будет затруднен. Хотя при этом будет показана только видимая часть SVG.

Комментарии автора вопроса:

Я просто делаю эффект 2.5d, поэтому у меня есть опора для пикселей, распределенных по оси x. Я знаю, где это все, и мне просто нужен расчет ширины окна просмотра.

Расчет ширины окна просмотра (viewBox)

Ниже пример с двумя фигурами SVG. Одна фигура находится внутри svg viewBox, вторая снаружи

<svg  xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink"
         width="600" height="300" viewBox="0 0 600 300" style="border:1px solid" >  
  <g>
<rect x="20" y="50" width="200" height="200" rx="5%" fill="purple" />
           <!--Окружность с координатой цетра - cx = "800" снаружи при viewBox = "0 0 600 300" -->
<circle cx="800" cy="150" r="140" fill="greenyellow" />
</g>
</svg>

Круг находится за пределами svg холста, поэтому он не отображается в браузере.

Вот так это выглядит в векторном редакторе:

Чтобы обе фигуры находились внутри svg холста нужно рассчитать параметры viewBox.
Для этого помещаем обе фигуры в групповой тег <g> и рассчитываем параметры viewBox

<svg  xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink"
         width="600" height="300" viewBox="0 0 600 300" style="border:1px solid" >  
         
  <g id="group">
<rect x="20" y="50" width="200" height="200" rx="5%" fill="purple" />
           <!--Окружность с координатой цетра - cx = "800" снаружи при viewBox = "0 0 600 300" -->
<circle cx="800" cy="150" r="140" fill="greenyellow" />
</g>
</svg>     

<script>
 console.log(group.getBBox())
</script>

Устанавливаем вычисленные атрибуты viewBox

Было: viewBox="0 0 600 300"

Стало: viewBox="20 10 920 280"

<svg  xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink"
         width="600" height="300" viewBox="20 10 920 280" style="border:1px solid" >  
         
  <g id="group">
<rect x="20" y="50" width="200" height="200" rx="5%" fill="purple" />
           <!--Окружность с координатой цетра - cx = "800" внутри при viewBox = "0 0 600 300" -->
</g>
</svg>

_{Свободный перевод ответа от участника @Alexandr_TT.}

БЛОГ НА HUSL

Вычисляет ли svg другие элементы вне окна просмотра?

Ответы (1 шт):

Расчет ширины окна просмотра (viewBox)