Three boundaries that can cut an SVG shadow

三个不同边界：SVG 视口、滤镜处理区域、HTML 外层容器。Each panel uses the same 64 × 48 viewBox, circle and shadow. The blue outline marks the viewport; the dashed orange outline marks the wrapper.

A · Viewport clipped / 视口裁切

svg overflow:hidden; expanded filter region. The shadow stops at the right viewport edge.

B · Viewport visible / 视口允许溢出

Only the SVG overflow changed from A. The shadow extends beyond the blue edge; the SVG layout box is still 128 × 96 CSS pixels.

C · Filter clipped / 滤镜区域裁切

Same SVG overflow as B. Filter bounds are restricted to the source object's bounding box; changing viewport overflow does not expand those bounds.

D · Wrapper clipped / 外层容器裁切

Same SVG and filter behavior as B, inside a 128 × 96 wrapper with overflow:hidden. The outer boundary crops the shadow.

This is an original minimal rendering comparison, not a performance benchmark or a guarantee for all embeddings. 它不包含用户素材、分析数据或外部脚本。Use your own required layout and browser for final acceptance.

References: MDN SVG overflow · MDN filter. Imagild Editorial · AI-assisted · Original test source CC0.