为什么 SVG 子图像在 chrome 中显示不正确，除非视口比要求的大

Question

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

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

（左边的段被切掉）

相同的 SVG，但窗口高度增加后可以正确显示：

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

并且仅旋转 45 度时：

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

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

有什么想法吗？

Answer 1

好的，答案来了。事实证明，单个子图像没有明确的宽度和高度设置。一旦这个问题得到解决，一切都开始按预期工作：

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">....

为什么 SVG 子图像在 chrome 中显示不正确，除非视口比要求的大

Why is SVG subimage displayed improperly in chrome, unless viewport is made bigger than required

svg

rendering

viewport