时间戳

首页 > 解决方案 > 转换属性在退出我的 div 后隐藏我的 svg 图像

jquery - 转换属性在退出我的 div 后隐藏我的 svg 图像

问题描述

我正在尝试拉伸我的 svg 图像的一部分，使用 transform 属性使用它的 id 仅缩放我的 svg 图像的中间部分。它开始缩放，但是当我的图像中间部分退出 div 时，它根本不显示。我试图从它的 id 缩放我的图像部分，而不是为每个部分创建单独的 svg 文件。我试过到处搜索，但没有找到任何使用 jquery 的解决方案。

我尝试在父 div 上使用 transform 属性，它在那里工作得很好。但是，当我尝试对孩子做同样的事情时（使用 id 扩展特定部分），它开始伸展，但一旦它离开父 div，它就开始消失。

我想拉伸我的图像，使我的图像的最后一部分是不变的，但中间部分只会增加，而随着中间部分的增加，我的图像的最后一部分会垂直推动。

这是图像

这是铅笔

它在使用转换时会执行类似的操作。我正在尝试仅扩展红色部分并且..

在此处输入图像描述

在这里，这部分得到了很好的扩展，我使用检查进行了检查，但在它离开 div 后根本没有任何显示。

而且底部也不应该向下推。我错过了什么？如果可以的话，如果我可以从这里学习和学习任何东西，请提供给我参考。方法是否正确？任何事物。


这是我的代码（另见JSFiddle）

$(document).ready(function(){
    $(document).scroll(function(){
        x = $(document).scrollTop();
        y = x/5;

        if (y < 1){
            $(' .Pencil, #Middle').css('transform','none');
        }
        else{
            if (($(document).height()) > 950){}
            else{
                $('#Middle').css({
                    'transform' : 'scaleY('+ y/4 + ')',
                });
                var new_height = $('#expandablePencil')[0].getBBox().height;
                if ($('.Pencil').height() < 200){
                }
                else{
                    $('.Pencil').css({
                        'height' : x + "px"
                    });
                }
                
            }
            
        var new_height = $('#expandablePencil')[0].getBBox().height;
        }

        console.log(new_height); 
    });    
    
})
*, *::before, *::after{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


.main{
    height: 800px;
    padding: 20px;
    
}


.svgPencil{
    position: absolute;
    right: 10px;
    top: 30px;
    
}

.Pencil{
    width: 20px;
    height: 100px;
    transform-origin: top;
}

#expandablePencil{
    height: 100%;
    width: 100%;
}

#Middle{
    transform-origin: top;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>
    <div class="main">
        <div class="svgPencil">
            <div class="svgImage">
                <svg class="Pencil">
                    <use href="#pencilImage" id="expandablePencil"></use>
                </svg>
            </div>
        </div>


        <div class="row">
            <div class="col-lg-6">
                This is half part
            </div>
            <div class="col-lg-6">
                This is the another half
            </div>
        </div>
    </div>
        



    <svg version="1.1"  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <symbol id="pencilImage" x="0px" y="0px" viewBox="0 0 30 134.4" 
        style="enable-background:new 0 0 30 134.4;" xml:space="preserve">
            <style type="text/css">
                .st0{fill:#4D4D4F;}
                .st1{fill:#CA4062;}
            </style>
            <g id="Top">
                <rect y="0" class="st0" width="30" height="30"/>
            </g>
            <g id="Middle">
                <rect y="42" class="st1" width="30" height="40.9"/>
            </g>
            <g id="Bottom">
                <polygon class="st0" points="15.4,134.4 23.6,116.5 6.3,116.5 	"/>
                <path class="st1" d="M0,82.9v17.7C0,96.4,3.4,93,7.5,93c3.2,0,5.8,2,7,4.7c0.2,0.5,0.8,0.5,1.1,0c1.1-2.8,3.8-4.7,7-4.7
                    c4.1,0,7.5,3.4,7.5,7.5l0,0V82.9H0z"/>
            </g>
        </symbol>
    </svg>

标签： jqueryhtmlcsssvg

解决方案

推荐阅读