SVG子图像为何无法在chrome中正确显示，除非将视口设置得比所需的大

问题描述

我正在从多个子图像中渲染SVG图像（可视化工业安装）。当视口设置为最小程度时，这些子图像的一部分不会以chrome渲染（其他查看器，例如IntelliJ中的查看器则没有任何问题）。图像由沿负Y轴的子图像组合而成，然后旋转到视口中。计算出的视口大小包括所有模块的所有角点。

在chrome中出现显示问题的SVG：
http://www.pribluda.de/test_svg/testRender_90.svg

（段在左侧切开）

相同的SVG，但随着wiewport高度的增加，将正确显示：

http://www.pribluda.de/test_svg/testRender_x18.svg

仅旋转45度时：

http://www.pribluda.de/test_svg/testRender_45.svg

使用普通矩形而不是实际模块图片创建的图像不存在此问题-不幸的是，我无法更改这些模块图像，因为它们来自第三方。

有什么想法吗？

解决方法

好的，答案来了。事实证明，单独的子图像没有明确的宽度和高度设置。解决此问题后，一切都将按预期方式工作：

http://www.pribluda.de/test_svg/testRender.svg

对于Chrome渲染引擎来说，拥有此信息似乎很重要-否则，图像的某些部分可能会被优化掉。

之前：

  <g transform="matrix(0.0 1.0 -1.0 -0.0 0.0 -0.0) "
><g transform="matrix(1.0 0.0 0.0 1.0 0.0 -225.0) "
  ><svg contentScriptType="text/ecmascript" xmlns:xlink="http://www.w3.org/1999/xlink" zoomAndPan="magnify" modulenr="0" contentStyleType="text/css" id="Layer_1" data-name="Layer 1" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" version="1.0"
    ><defs

之后：

<g xmlns="http://www.w3.org/2000/svg" transform="matrix(0.0 1.0 -1.0 -0.0 0.0 -0.0) "><g transform="matrix(1.0 0.0 0.0 1.0 0.0 -225.0) "><svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" contentScriptType="text/ecmascript" width="130" zoomAndPan="magnify" modulenr="0" contentStyleType="text/css" height="225" id="Layer_1" data-name="Layer 1" preserveAspectRatio="xMidYMid meet" version="1.0">....