I am rendering SVG image out of multiple subimages (visualising industrial installation). And parts of those subimages are not rendered in chrome when viewport is set to smallest possible extent ( other viewers like one in IntelliJ do not have any prolbem with it ). Image is assembled from subimages along negative Y-Axis,and then rotated into viewport. Viewport size is calculated to include all corner points of all the modules.
SVG with display problems in chrome:
http://www.pribluda.de/test_svg/testRender_90.svg
( segments are cut on the left side )
Same SVG, but with wiewport height increased is displayed properly:
http://www.pribluda.de/test_svg/testRender_x18.svg
And when rotated only 45 degrees:
http://www.pribluda.de/test_svg/testRender_45.svg
Images created with plain rectangles instead of actual module pictures do not have this problem - unfortunately I can not change those module images as they come from third party.
Any ideas?
OK, here comes the answer. As it turns out, indivudual subimages had no explicit width and height set. Once this problem was adressed, everything started to work as intendet:
http://www.pribluda.de/test_svg/testRender.svg
It seems important for chrome rendering engine to have this information - otherwise parts of the images may be optimised away.
Before:
<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
After:
<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">....