SVG 多层嵌套 通过viewBox放大外层SVG时内层会逐渐消失

830 阅读1分钟

问题:

多层SVG嵌套使用时候,通过设置viewBox控制最外层SVG的缩放,内层会跟着缩放,但是放大到一定程度,内层会逐渐消失。

原因: 内层没有设置高宽!!!

高宽默认100%,随外层的缩放也在变化,导致外层放大到一定程度,外层高宽小于内层原始高宽,超过部分被遮蔽。

效果对比图:

在这里插入图片描述

内层SVG的原始高宽,可用Ai软件打开(文档设置-编辑画板)查阅。

在这里插入图片描述