svg clipping on viewbox change

Question

When I change the viewbox parmeter to perform a zoom on a specific svg element, the inner element that is the visualization of the frames gets cropped. Is something wrong with my viewbox attribute conversion or with the mark-up itself?

I'm having a hard time tracking where the clipping is coming from on the svg.composition element which is a child of the main svg. Transition on the main svg is done correctly.

I have the impression that this is due to the specific embedding of frame content using the sprite technique.

<svg width="300px" height="300px" viewBox="-1833.3333333333333 -1037.3333333333333 2730.6666666666665 2730.6666666666665" data-viewbox="-1833.3333333333333 -1037.3333333333333 2730.6666666666665 2730.6666666666665">
    <foreignObject x="-1833.3333333333333" y="-1037.3333333333333" width="2730.6666666666665" height="2730.6666666666665">
        <img width="2730.6666666666665" height="2730.6666666666665" src="https://image">
    </foreignObject>
    <svg class="composition" x="-725" y="-438" data-viewbox="-725 -438 1450.0 875.0 ">
        <filter id="shadow" color-interpolation-filters="sRGB">
            <feDropShadow dx="-30" dy="2" stdDeviation="10" flood-opacity="0.4"></feDropShadow>
        </filter>
        <g color="#e5e7eb">
            <svg class="frame" x="250.0" y="50.0" width="225.0" height="325.0" filter="url(#shadow)" data-viewbox="-475.0 -388.0 225.0 325.0">
                <svg width="225.0" height="325.0">
                    <rect x="0" y="0" width="225.0" height="325.0" fill="White" stroke="gray" stroke-width="0.4"></rect>
                    <svg class="print" x="16" y="16" width="192.0" height="292.0">
                        <rect x="0" y="0" width="192.0" height="292.0" fill="#FFFFFF" stroke="gray" stroke-width="0.5">
                        </rect>
                        <svg viewBox="0 0 683 1024" x="0.0" y="0" width="192.0" height="292.0 " preserveAspectRatio="xMidYMid slice">
                            <svg viewBox="2049 0 683 1024" xmlns="http://www.w3.org/2000/svg" width="683" height="1024" preserveAspectRatio="xMidYMid merge">
                                <foreignObject width="4098" height="1024">
                                    <img width="4098" height="1024" src="https://image">
                                </foreignObject>
                            </svg>
                        </svg>
                    </svg>
                </svg>
            </svg>
            <svg class="frame" x="25.0" y="150.0" width="175.0" height="225.0" filter="url(#shadow)" data-viewbox="-700.0 -288.0 175.0 225.0">
                <svg width="175.0" height="225.0">
                    <rect x="0" y="0" width="175.0" height="225.0" fill="White" stroke="gray" stroke-width="0.4"></rect>
                    <svg class="print" x="16" y="16" width="142.0" height="192.0">
                        <rect x="0" y="0" width="142.0" height="192.0" fill="#FFFFFF" stroke="gray" stroke-width="0.5">
                        </rect>
                        <svg viewBox="0 0 683 1024" x="0.0" y="0" width="142.0" height="192.0" preserveAspectRatio="xMidYMid slice">
                            <svg viewBox="1366 0 683 1024" xmlns="http://www.w3.org/2000/svg" width="683" height="1024" preserveAspectRatio="xMidYMid merge">
                                <foreignObject width="4098" height="1024">
                                    <img width="4098" height="1024" src="https://image">
                                </foreignObject>
                            </svg>
                        </svg>
                    </svg>
                </svg>
            </svg>
            <svg class="frame" x="150.0" y="425.0" width="325.0" height="425.0" filter="url(#shadow)" data-viewbox="-575.0 -13.0 325.0 425.0">
                <svg width="325.0" height="425.0">
                    <rect x="0" y="0" width="325.0" height="425.0" fill="White" stroke="gray" stroke-width="0.4"></rect>
                    <svg class="print" x="16" y="16" width="292.0" height="392.0">
                        <rect x="0" y="0" width="292.0" height="392.0" fill="#FFFFFF" stroke="gray" stroke-width="0.5">
                        </rect>
                        <svg viewBox="0 0 683 1024" x="0.0" y="0" width="292.0" height="392.0 " preserveAspectRatio="xMidYMid slice">
                            <svg viewBox="3415 0 683 1024" xmlns="http://www.w3.org/2000/svg" width="683" height="1024" preserveAspectRatio="xMidYMid merge">
                                <foreignObject width="4098" height="1024">
                                    <img width="4098" height="1024" src="https://image">
                                </foreignObject>
                            </svg>
                        </svg>
                    </svg>
                </svg>
            </svg>
            <svg class="frame" x="1200.0" y="400.0" width="225.0" height="325.0" filter="url(#shadow)" data-viewbox="475.0 -38.0 225.0 325.0">
                <svg width="225.0" height="325.0">
                    <rect x="0" y="0" width="225.0" height="325.0" fill="White" stroke="gray" stroke-width="0.4"></rect>
                    <svg class="print" x="16" y="16" width="192.0" height="292.0">
                        <rect x="0" y="0" width="192.0" height="292.0" fill="#FFFFFF" stroke="gray" stroke-width="0.5">
                        </rect>
                        <svg viewBox="0 0 683 1024" x="0.0" y="0" width="192.0" height="292.0 " preserveAspectRatio="xMidYMid slice">
                            <svg viewBox="2732 0 683 1024" xmlns="http://www.w3.org/2000/svg" width="683" height="1024" preserveAspectRatio="xMidYMid merge">
                                <foreignObject width="4098" height="1024">
                                    <img width="4098" height="1024" src="https://image">
                                </foreignObject>
                            </svg>
                        </svg>
                    </svg>
                </svg>
            </svg>
            <svg class="frame" x="1200.0" y="25.0" width="225.0" height="325.0" filter="url(#shadow)" data-viewbox="475.0 -413.0 225.0 325.0">
                <svg width="225.0" height="325.0">
                    <rect x="0" y="0" width="225.0" height="325.0" fill="White" stroke="gray" stroke-width="0.4"></rect>
                    <svg class="print" x="16" y="16" width="192.0" height="292.0">
                        <rect x="0" y="0" width="192.0" height="292.0" fill="#FFFFFF" stroke="gray" stroke-width="0.5">
                        </rect>
                        <svg viewBox="0 0 683 1024" x="0.0" y="0" width="192.0" height="292.0 " preserveAspectRatio="xMidYMid slice">
                            <svg viewBox="683 0 683 1024" xmlns="http://www.w3.org/2000/svg" width="683" height="1024" preserveAspectRatio="xMidYMid merge">
                                <foreignObject width="4098" height="1024">
                                    <img width="4098" height="1024" src="https://picture">
                                </foreignObject>
                            </svg>
                        </svg>
                    </svg>
                </svg>
            </svg>
            <svg class="frame" x="525.0" y="25.0" width="625.0" height="825.0" filter="url(#shadow)" data-viewbox="-200.0 -413.0 625.0 825.0">
                <svg width="625.0" height="825.0">
                    <rect x="0" y="0" width="625.0" height="825.0" fill="White" stroke="gray" stroke-width="0.4"></rect>
                    <svg class="print" x="16" y="16" width="592.0" height="792.0">
                        <rect x="0" y="0" width="592.0" height="792.0" fill="#FFFFFF" stroke="gray" stroke-width="0.5">
                        </rect>
                        <svg viewBox="0 0 683 1024" x="0.0" y="0" width="592.0" height="792.0 " preserveAspectRatio="xMidYMid slice">
                            <svg viewBox="0 0 683 1024" xmlns="http://www.w3.org/2000/svg" width="683" height="1024" preserveAspectRatio="xMidYMid merge">
                                <foreignObject width="4098" height="1024">
                                    <img width="4098" height="1024" data-sizes="auto" class="lazyautosizes ls-is-cached lazyloaded" src="https://picture">
                                </foreignObject>
                            </svg>
                        </svg>
                    </svg>
                </svg>
            </svg>
        </g>
    </svg>
    <foreignObject x="-1833.3333333333333" y="-1037.3333333333333" width="2730.6666666666665"
        height="2730.6666666666665">
        <img width="2730.6666666666665" height="2730.6666666666665" src="https://background/">
    </foreignObject>
</svg>

here is the codepen link: https://codepen.io/wspak/pen/wvyLKEY

Please provide a [**Minimal**, Reproducible Example](https://stackoverflow.com/help/minimal-reproducible-example). Please reduce your code to one element and one manipulation via script to narrow down your problems. — herrstrietzel, Jul 05 '22 at 23:30

score 0 · Answer 1 · answered Jul 06 '22 at 09:18

0

I found it - SVG by default has overflow: hidden, making it overflow: visible solved the problem

answered Jul 06 '22 at 09:18

Adrian Krawczyk

1
1

svg clipping on viewbox change

1 Answers1