所以我有一个菜单，该菜单在选定时显示所选内容后面的动画。问题是，我无法将这些svg动画剪辑在其父容器中。我试过溢出：隐藏在父容器上，但无济于事！！任何建议都很好。我已经尽可能多地遍历了网，直到我唯一的希望是直接与你们在一起。感谢您的帮助：）

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

我认为这就是一切，但我可​​能会误漏其他东西。如果我不太清楚，很高兴回答问题。再次感谢您的任何建议。