html - 努力隐藏 SVG 以用于某些 svg 动画

Question

所以我有一个菜单，在选择时显示选择背后的动画。问题是，我无法将这些 svg 动画剪辑在它们的父容器中。我试过 overflow: hidden on the parent container 但无济于事!任何建议都会很棒。我已经尽可能多地遍历网络，以至于我唯一的希望就是直接与你们联系。感谢您的帮助:)

HTML:

<!-- MENU -->
    <div id="nav-menu">
        <div class="menu">
            <div class="dots-overlay-black">
                <svg width="100%" height="100%">
                    <defs>
                        <pattern id="dots-black" x="0" y="0" width="60" height="60" patternUnits="userSpaceOnUse">
                            <circle fill="#000" cx="0.75" cy="0.75" r="0.75"></circle>
                        </pattern>
                    </defs>
                    <rect x="0" y="0" width="100%" height="100%" fill="url(#dots-black)"></rect>
                </svg>
            </div>

            <div class="row no-gutters">
                <div class="col no-gutters">
                    <div class="col1 d-flex justify-content-center align-items-center">
                        CONNECT
                    </div>
                </div>
                <div class="col no-gutters">
                    <div class="col2 d-flex justify-content-center align-items-center" onMouseOver="show_figureAnim()" onMouseOut="hide_figureAnim()">
                        <div class="btn-figure">
                            FIGURE
                        </div>

                        <div id="figure-btn-anim">
                            <script src="javascript/figureMenuAnim.js"></script>
                        </div>
                    </div>
                </div>
                <div class="col no-gutters">
                    <div class="col3 d-flex justify-content-center align-items-center">
                        <div class="btn-home">
                            HOME
                        </div>

                        <div id="home-btn-anim">
                            <script src="javascript/homeMenuAnim.js"></script>
                        </div>
                    </div>
                </div>
                <div class="col no-gutters">
                    <div class="col4 d-flex justify-content-center align-items-center">
                        <div class="btn-design">
                            DESIGN
                        </div>

                        <div id="design-btn-anim">
                            <script src="javascript/designMenuAnim.js"></script>
                        </div>
                    </div>
                </div>
                <div class="col no-gutters">
                    <div class="col5 d-flex justify-content-center align-items-center">
                        <div class="btn-motion">
                            MOTION
                        </div>

                        <div id="motion-btn-anim">
                            <script src="javascript/motionMenuAnim.js"></script>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

CSS:

/*-----------------------------------------// MENU \\-----------------------------------------*/
#nav-menu {
position: absolute;
width: 100%;
height: 100px;
z-index: 2;
}

.menu {
display: none;
width: 100%;
height: 100vh;
}

.menu.active {
display: block;
background: #fff;
}

.col1, .col2, .col3, .col4, .col5 {
display: block;
height: 100vh;
width: 100%;
font-family: 'Poppins',sans-serif;
font-weight: 700;
font-size: 36px;
color: #000;
background: none;
align-items: center;
overflow: hidden !important;
}

.col1:hover, .col2:hover, .col3:hover, .col4:hover, .col5:hover {
color: #fff;
background: #000;
/*cursor: pointer;*/
}

/*______________________________/ BUTTON ANIMATIONS */
/* Animation visible on hover */
.col1:hover #connect-btn-anim, .col2:hover #figure-btn-anim, .col3:hover #home-btn-anim, .col4:hover #design-btn-anim, .col5:hover #motion-btn-anim {
visibility: visible;
}

/* Figure Button */
.btn-figure {
position: relative;
margin: 0;
padding: 0;
pointer-events: none;
z-index: 1;
}

#figure-btn-anim {
position: absolute;
display: block;
height: inherit;
width: auto;
margin: 0;
padding: 0;
visibility: hidden;
pointer-events: none;
}

#figure-btn-anim svg {
position: relative;
display: block;
width: auto !important;
}

JS(SVG 动画)

var animationData =
{animation code exceeds character limit so can't put this here}

var params = {
    container: document.getElementById('figure-btn-anim'),
    renderer: 'svg',
    loop: true,
    autoplay: true,
    animationData: animationData
};

var anim;

anim = lottie.loadAnimation(params);

Image showing the svg animation overflow

这是它目前的样子。红线突出显示父容器 (.col2) 的大约大小，其中 SVG 动画 (figure-btn-anim svg) 未被剪裁。

我想这就是全部，但我可能会错误地错过其他内容。如果我没有尽可能清楚地回答问题，我很乐意回答。再次感谢您的任何建议。

Answer 1

刚刚解决了!!!!!!

我没有针对单个列(col1、col2、col3)，而是针对整个 .col 类。

.col {
    overflow: hidden;

这成功了!