Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Lazy loading of SVG foreignObject after zoom animation. #961

Open
lukaszolek opened this issue Jun 10, 2022 · 0 comments
Open

Lazy loading of SVG foreignObject after zoom animation. #961

lukaszolek opened this issue Jun 10, 2022 · 0 comments
Labels
bug

Comments

@lukaszolek
Copy link

lukaszolek commented Jun 10, 2022 •
edited

Hi, i've got the similar problem like here #691, but for foreignObject that gets zoomed in in SVG animation.

Here is the code (see also here: https://jsfiddle.net/lukaszolek/egnzjyf9/7/):

<!DOCTYPE html>
<html>
<head>
    <script src="https://afarkas.github.io/lazysizes/lazysizes.min.js" async=""></script>
</head>
<body>

    <svg width="300px" height="300px" viewBox="-555.5555555555555 -472.22222222222223 1137.7777777777778 1137.7777777777778">
        <animate attributeName="viewBox" to="-133.5 -183.5 267.0 367.0" dur="0.7s" fill="freeze" begin="mouseover" calcMode="spline" keyTimes="0;1" keySplines="0.4, 0, 0.2, 1"/>
        <animate attributeName="viewBox" to="-555.5555555555555 -472.22222222222223 1137.7777777777778 1137.7777777777778" dur="0.7s" fill="freeze" begin="mouseout" calcMode="spline" keyTimes="0;1" keySplines="0.4, 0, 0.2, 1"/>
        <foreignObject x="-555.5555555555555" y="-472.22222222222223" width="1137.7777777777778" height="1137.7777777777778">
            <img width="1137.7777777777778" height="1137.7777777777778" data-sizes="auto" class="lazyload" data-srcset="https://fra1.digitaloceanspaces.com/frami/backgrounds/layers/thumbnails/Boho_kidsroom_bright_warm_front_90x65_layer_0.webp.50x50_q85.png?AWSAccessKeyId=QWB7TF5DZPDY75OTEV4P&Signature=b4gGaWUsP63saAz5moZomi5nJhk%3D&Expires=1654869805 50w, https://fra1.digitaloceanspaces.com/frami/backgrounds/layers/thumbnails/Boho_kidsroom_bright_warm_front_90x65_layer_0.webp.180x180_q85.png?AWSAccessKeyId=QWB7TF5DZPDY75OTEV4P&Signature=kM15LOolLCPq0Xh93QdYxMwupVg%3D&Expires=1654869805 180w, https://fra1.digitaloceanspaces.com/frami/backgrounds/layers/thumbnails/Boho_kidsroom_bright_warm_front_90x65_layer_0.webp.360x360_q85.png?AWSAccessKeyId=QWB7TF5DZPDY75OTEV4P&Signature=gIr9pC8QFE7QGKViYXn9f3v220w%3D&Expires=1654869805 360w, https://fra1.digitaloceanspaces.com/frami/backgrounds/layers/thumbnails/Boho_kidsroom_bright_warm_front_90x65_layer_0.webp.540x540_q85.png?AWSAccessKeyId=QWB7TF5DZPDY75OTEV4P&Signature=D54ZQQ7I9wAGJ%2BlAqd5zR1AAE%2F4%3D&Expires=1654869806 540w, https://fra1.digitaloceanspaces.com/frami/backgrounds/layers/thumbnails/Boho_kidsroom_bright_warm_front_90x65_layer_0.webp.720x720_q85.png?AWSAccessKeyId=QWB7TF5DZPDY75OTEV4P&Signature=pMvOsJ27%2FciEX2%2FLEl9enlU2sAE%3D&Expires=1654869806 720w, https://fra1.digitaloceanspaces.com/frami/backgrounds/layers/thumbnails/Boho_kidsroom_bright_warm_front_90x65_layer_0.webp.900x900_q85.png?AWSAccessKeyId=QWB7TF5DZPDY75OTEV4P&Signature=9uXXKVWiWYrm6wUbseNE3CArlNg%3D&Expires=1654869806 900w">
        </foreignObject>
        <svg x="-133.5" y="-183.5">
            <filter id="shadow" color-interpolation-filters="sRGB">
                <feDropShadow dx="-30" dy="2" stdDeviation="10" flood-opacity="0.4"/>
            </filter>
            <g color="#e5e7eb">
                <svg x="21.0" y="21.0" width="225.0" height="325.0" filter="url(#shadow)">
                    <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"/>
                        <svg 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"/>
                            <svg x="0.0" y="0.0" width="192.0" height="292.0">
                                <foreignObject x="-8.290759554910494" y="0" width="208.581519109821" height="292.0">
                                    <img id="im1" width="208.581519109821" height="292.0" data-sizes="auto" class="lazyload" src="https://fra1.digitaloceanspaces.com/frami/images/guwf4494/thumbnails/x5h9t9xu.jpg.50x50_q85.jpg?AWSAccessKeyId=QWB7TF5DZPDY75OTEV4P&Signature=CSop%2Fyt2LHzOrf%2F1p%2FzieJOVrzs%3D&Expires=1654869808" data-srcset="https://fra1.digitaloceanspaces.com/frami/images/guwf4494/thumbnails/x5h9t9xu.jpg.50x50_q85.jpg?AWSAccessKeyId=QWB7TF5DZPDY75OTEV4P&Signature=CSop%2Fyt2LHzOrf%2F1p%2FzieJOVrzs%3D&Expires=1654869808 50w, https://fra1.digitaloceanspaces.com/frami/images/guwf4494/thumbnails/x5h9t9xu.jpg.180x180_q85.jpg?AWSAccessKeyId=QWB7TF5DZPDY75OTEV4P&Signature=m4tZq%2FyuYLHny%2BWakAiTYzBG8vM%3D&Expires=1654869809 180w, https://fra1.digitaloceanspaces.com/frami/images/guwf4494/thumbnails/x5h9t9xu.jpg.360x360_q85.jpg?AWSAccessKeyId=QWB7TF5DZPDY75OTEV4P&Signature=ChLEB9VuE%2BTugZPoCrzIj9dnm60%3D&Expires=1654869811 360w, https://fra1.digitaloceanspaces.com/frami/images/guwf4494/thumbnails/x5h9t9xu.jpg.540x540_q85.jpg?AWSAccessKeyId=QWB7TF5DZPDY75OTEV4P&Signature=EHHePppoduqXlURzgTVK9FCvT8U%3D&Expires=1654869812 540w, https://fra1.digitaloceanspaces.com/frami/images/guwf4494/thumbnails/x5h9t9xu.jpg.720x720_q85.jpg?AWSAccessKeyId=QWB7TF5DZPDY75OTEV4P&Signature=K2x69G3Ec2KnrcOyHdRab%2FWNkkU%3D&Expires=1654869814 720w, https://fra1.digitaloceanspaces.com/frami/images/guwf4494/thumbnails/x5h9t9xu.jpg.900x900_q85.jpg?AWSAccessKeyId=QWB7TF5DZPDY75OTEV4P&Signature=LkBaGjgwgtKc8%2BwTYzIumgSrRlI%3D&Expires=1654869815 900w">
                                </foreignObject>
                            </svg>
                        </svg>
                    </svg>
                </svg>
            </g>
        </svg>
        <foreignObject x="-555.5555555555555" y="-472.22222222222223" width="1137.7777777777778" height="1137.7777777777778">
            <img width="1137.7777777777778" height="1137.7777777777778" data-sizes="auto" class="lazyload" data-srcset="https://fra1.digitaloceanspaces.com/frami/backgrounds/layers/thumbnails/Boho_kidsroom_bright_warm_front_90x65_layer_1.webp.50x50_q85.png?AWSAccessKeyId=QWB7TF5DZPDY75OTEV4P&Signature=%2FYvwZVDIyikVd7OsnrUh0O0c0H4%3D&Expires=1654869805 50w, https://fra1.digitaloceanspaces.com/frami/backgrounds/layers/thumbnails/Boho_kidsroom_bright_warm_front_90x65_layer_1.webp.180x180_q85.png?AWSAccessKeyId=QWB7TF5DZPDY75OTEV4P&Signature=BKiBZudxX8GDDV8D6%2BSocVrChUA%3D&Expires=1654869805 180w, https://fra1.digitaloceanspaces.com/frami/backgrounds/layers/thumbnails/Boho_kidsroom_bright_warm_front_90x65_layer_1.webp.360x360_q85.png?AWSAccessKeyId=QWB7TF5DZPDY75OTEV4P&Signature=SALGLkXr1kF5cfibK5n3fgbwyvY%3D&Expires=1654869805 360w, https://fra1.digitaloceanspaces.com/frami/backgrounds/layers/thumbnails/Boho_kidsroom_bright_warm_front_90x65_layer_1.webp.540x540_q85.png?AWSAccessKeyId=QWB7TF5DZPDY75OTEV4P&Signature=Jlpe%2Fjcog8YQugHZLY8GXugoX3Q%3D&Expires=1654869805 540w, https://fra1.digitaloceanspaces.com/frami/backgrounds/layers/thumbnails/Boho_kidsroom_bright_warm_front_90x65_layer_1.webp.720x720_q85.png?AWSAccessKeyId=QWB7TF5DZPDY75OTEV4P&Signature=IW2hHRJlrFjBJ3CQwYa94gP0pCs%3D&Expires=1654869806 720w, https://fra1.digitaloceanspaces.com/frami/backgrounds/layers/thumbnails/Boho_kidsroom_bright_warm_front_90x65_layer_1.webp.900x900_q85.png?AWSAccessKeyId=QWB7TF5DZPDY75OTEV4P&Signature=8m7bPfjg8ST7styQbXhApq7eFDc%3D&Expires=1654869806 900w">
        </foreignObject>
    </svg>

    <script lang="text/javascript">
    document.addEventListener('lazybeforesizes', ({target, detail}) => {
        detail.width = target.getBoundingClientRect().width;
    });
    </script>
</body>
</html>

After loading the document the lazysizes loads correct images from srcset. However, when you hover on this image, the frame on the wall gets zoomed in with viewbox animation. Can I somehow trigger loading correct image resolution after the zoom takes place?
@lukaszolek lukaszolek added the bug label Jun 10, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@lukaszolek