如何解决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">....
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。