SVG layer nesting When zooming in on the outer SVG layers in the viewBox, the inner layers fade away

Question:

When nested with multiple SVG layers, you can set the viewBox to control the scaling of the outermost SVG layer. The inner layer will be scaled as well, but the inner layer will disappear when you zoom in to a certain point.

Reason: The inner layer is not set with height and width!!

The width of the outer layer is 100% by default, which also changes with the scaling of the outer layer. As a result, the outer layer is enlarged to a certain extent, and the width of the outer layer is smaller than the original height and width of the inner layer, and the part exceeding the height and width is obscured.

Effect comparison diagram:

The original height and width of the inner SVG can be opened by Ai software (Document Setup – Edit Palette).