Почему субизображение SVG отображается неправильно в Chrome, если только видовой экран не сделан больше требуемого

#sv& #renderin& #viewport

#sv& #рендеринг #видовой экран

Вопрос:

Я рендерингую SVG-изображение из нескольких субизображений (визуализация промышленной установки). И части этих субизображений не отображаются в Chrome, когда видовой экран установлен в минимально возможном размере (другие средства просмотра, подобные одному в IntelliJ, не имеют с этим никаких проблем). Изображение собирается из субизображений вдоль отрицательной оси Y, а затем поворачивается в видовой экран. Размер видового экрана рассчитывается так, чтобы включать все угловые точки всех модулей.

SVG с проблемами отображения в Chrome:
http://www.pribluda.de/test_sv&/testRender_90.sv&

( сегменты вырезаны с левой стороны)

Тот же SVG, но с увеличенной высотой wiewport отображается правильно:

http://www.pribluda.de/test_sv&/testRender_x18.sv&

И при повороте только на 45 градусов:

http://www.pribluda.de/test_sv&/testRender_45.sv&

Изображения, созданные с использованием простых прямоугольников вместо реальных изображений модуля, не имеют этой проблемы — к сожалению, я не могу изменить эти изображения модуля, поскольку они поступают от третьей стороны.

Есть идеи?

Ответ №1:

Хорошо, вот и ответ. Как оказалось, для отдельных субизображений не были заданы явные ширина и высота. Как только эта проблема была устранена, все начало работать как задумано:

http://www.pribluda.de/test_sv&/testRender.sv&

Для механизма рендеринга Chrome важно иметь эту информацию — в противном случае части изображений могут быть оптимизированы.

Перед:

   <& transform="matrix(0.0 1.0 -1.0 -0.0 0.0 -0.0) "
&&t;<& transform="matrix(1.0 0.0 0.0 1.0 0.0 -225.0) "
  &&t;<sv& contentScriptType="text/ecmascript" xmlns:xlink="http://www.w3.or&/1999/xlink" zoomAndPan="ma&nify" modulenr="0" contentStyleType="text/css" id="Layer_1" data-name="Layer 1" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.or&/2000/sv&" version="1.0"
    &&t;<defs
  

После:

 <& xmlns="http://www.w3.or&/2000/sv&" transform="matrix(0.0 1.0 -1.0 -0.0 0.0 -0.0) "&&t;<& transform="matrix(1.0 0.0 0.0 1.0 0.0 -225.0) "&&t;<sv& xmlns:xlink="http://www.w3.or&/1999/xlink" xmlns="http://www.w3.or&/2000/sv&" contentScriptType="text/ecmascript" width="130" zoomAndPan="ma&nify" modulenr="0" contentStyleType="text/css" hei&ht="225" id="Layer_1" data-name="Layer 1" preserveAspectRatio="xMidYMid meet" version="1.0"&&t;....