当前位置： 文江博客话题详情

SVG剪辑在Viewbox上更改

发布于 2025-02-13 18:53:04 字数 9291 浏览 1 评论 0原文

当我更改Viewbox Parmeter以对特定的SVG元素执行缩放时，将裁剪框架的可视化元素。我的ViewBox属性转换或标记本身有问题吗？

我很难跟踪剪辑来自svg.com的位置，该元素是主要SVG的孩子。主SVG上的过渡正确完成。

我的印象是，这是由于使用Sprite技术对框架内容的特定嵌入造成的。

<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>

这是codepen链接： https://codepen.io/wspak/pen/wvylkey

原文

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

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（1）

私藏温柔 2025-02-20 18:53:04

我发现了它-SVG默认情况下溢出：隐藏，使其溢出：可见解决了问题

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

回复 原文
~没有更多了~

关于作者

一直在等你来

暂无简介

文章
评论
27 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

夢野间

文章 0 评论 0

百度③文鱼

文章 0 评论 0

小草泠泠

文章 0 评论 0

zhuwenyan

文章 0 评论 0

weirdo

文章 0 评论 0

坚持沉默

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文