css 如何绝对定位< SVG>元素而不显示溢出

ar7v8xwq  于 2022-12-05  发布在  其他
关注(0)|答案(1)|浏览(231)

你好，我正在尝试设计一个投资组合网站，当我试图在一个<svg>标签中放置两个blob时，我遇到了一个问题。我想在左上角和右下角放置两个blob，但由于svg的大小会受到不同的影响，这取决于将位置设置为“绝对”或“相对”。我希望他们切断div边界，但他们造成溢出在我的情况下，这是我不希望的。请按照下面的链接复制这个问题。
链接：https://portfolio-judesavio.vercel.app/
我也附上我的代码供您参考：

HTML文件

<html>
    <head>
        <!--media queries-->
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!--Page Title-->
        <title>Jude Savio</title>
        <!--Google Fonts-->
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;700&display=swap" rel="stylesheet">
        <!-- Linking Bootstrap -->
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
        <!--Typed.js for Intro section-->
        <script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.12"></script>
        <!-- Adding favicon-->
        <link rel="icon" href="./src/img/icon.ico">
        <!-- Linking custom CSS file -->
        <link rel="stylesheet" href="./index.css">
    </head>
    <body>
        <!-- Hero Section -->
        <section class="about">

            <!-- NavBar Component-->
            <nav class="navbar navbar-expand-lg navbar-dark">
                <div class="container" style="color: #00001f;">
                    <span class="navbar-brand"><img src="./src/img/nav-logo.svg"></span>
                    <button class="navbar-toggler ms-auto" type="button" data-bs-toggle="collapse" data-bs-target="#ToggleMenu" aria-controls="ToggleMenu" aria-expanded="false" aria-label="toggle navigation">
                        <span class="navbar-toggler-icon"></span>
                    </button>
                    <div class="navbar-collapse collapse" id="ToggleMenu">
                        <ul class="navbar-nav ms-auto" style="text-align: right;">
                            <li class="nav-item">
                                <a href="#" class="nav-link active">About</a>
                            </li>
                            <li class="nav-item">
                                <a href="#" class="nav-link">Work</a>
                            </li>
                            <li class="nav-item">
                                <a href="#" class="nav-link">Projects</a>
                            </li>
                            <li class="nav-item">
                                <a href="#" class="nav-link">Education</a>
                            </li>
                            <li class="nav-item">
                                <a href="#" class="nav-link">Testimonials</a>
                            </li>
                            <li class="nav-item">
                                <a href="#" class="nav-link">Contact</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </nav>
            
            <!--About Section Component-->
            <div class="about-text">
                <p>Hey There, I'm </p>
                <h1>My Name</h1>
                <h5 style="font-weight: lighter;">I am a &nbsp; <span style="font-weight: bold;" class="type"></span></h5>
                <script>
                    var typed = new Typed('.type', {
                    strings: [' Item 1 .', ' Item 2 .','Item 3 .','Item 4 .', 'Item 5 .'],
                    smartBackspace: true,
                    typeSpeed: 90,
                    backSpeed: 90,
                    loop: true, 
                    },
                    );
                </script>
            </div>

            <!-- Blob Decoration Section-->
            <div class="blob-one">
                <svg viewBox="0 0 800 800" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                    <defs>
                        <linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%">
                        <stop offset="0%" style="stop-color: rgb(235, 36, 159);"></stop>
                        <stop offset="100%" style="stop-color: rgb(52, 84, 143);"></stop>
                        </linearGradient>
                    </defs>
                    <path fill="url(#gradient)">
                        <animate attributeName="d" dur="10000ms" repeatCount="indefinite"
                        values=" M423.5,318.5Q413,387,351,429Q289,471,222.5,442.5Q156,414,89.5,373.5Q23,333,53,261Q83,189,123,144.5Q163,100,223,81Q283,62,350,86Q417,110,425.5,180Q434,250,423.5,318.5Z;
                        M439,307Q386,364,338.5,422.5Q291,481,223,447.5Q155,414,127,359.5Q99,305,91.5,247Q84,189,124.5,145.5Q165,102,224.5,78.5Q284,55,328.5,101Q373,147,432.5,198.5Q492,250,439,307Z;
                        M458.5,329.5Q439,409,361.5,425Q284,441,211,442.5Q138,444,86,386Q34,328,30,248Q26,168,99.5,142.5Q173,117,230,79Q287,41,343,83Q399,125,438.5,187.5Q478,250,458.5,329.5Z;
                        M402.5,312Q398,374,340.5,406Q283,438,222,421.5Q161,405,101.5,365.5Q42,326,35,247.5Q28,169,77.5,102.5Q127,36,207.5,36.5Q288,37,353.5,72.5Q419,108,413,179Q407,250,402.5,312Z; 
                        M423.5,318.5Q413,387,351,429Q289,471,222.5,442.5Q156,414,89.5,373.5Q23,333,53,261Q83,189,123,144.5Q163,100,223,81Q283,62,350,86Q417,110,425.5,180Q434,250,423.5,318.5Z">
                        </animate>
                    </path>
                </svg>
            </div>

            <div class="blob-two">
                <svg viewBox="0 0 800 800" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                    <defs>
                        <linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%">
                        <stop offset="0%" style="stop-color: rgb(235, 36, 159);"></stop>
                        <stop offset="100%" style="stop-color: rgb(52, 84, 143);"></stop>
                        </linearGradient>
                    </defs>
                    <path fill="url(#gradient)">
                        <animate attributeName="d" dur="10000ms" repeatCount="indefinite"
                        values=" M423.5,318.5Q413,387,351,429Q289,471,222.5,442.5Q156,414,89.5,373.5Q23,333,53,261Q83,189,123,144.5Q163,100,223,81Q283,62,350,86Q417,110,425.5,180Q434,250,423.5,318.5Z;
                        M439,307Q386,364,338.5,422.5Q291,481,223,447.5Q155,414,127,359.5Q99,305,91.5,247Q84,189,124.5,145.5Q165,102,224.5,78.5Q284,55,328.5,101Q373,147,432.5,198.5Q492,250,439,307Z;
                        M458.5,329.5Q439,409,361.5,425Q284,441,211,442.5Q138,444,86,386Q34,328,30,248Q26,168,99.5,142.5Q173,117,230,79Q287,41,343,83Q399,125,438.5,187.5Q478,250,458.5,329.5Z;
                        M402.5,312Q398,374,340.5,406Q283,438,222,421.5Q161,405,101.5,365.5Q42,326,35,247.5Q28,169,77.5,102.5Q127,36,207.5,36.5Q288,37,353.5,72.5Q419,108,413,179Q407,250,402.5,312Z; 
                        M423.5,318.5Q413,387,351,429Q289,471,222.5,442.5Q156,414,89.5,373.5Q23,333,53,261Q83,189,123,144.5Q163,100,223,81Q283,62,350,86Q417,110,425.5,180Q434,250,423.5,318.5Z">
                        </animate>
                    </path>
                </svg>
            </div>

         </section>

CSS文件

*{
    margin : 0;
    padding: 0;
    font-family: 'Outfit', sans-serif;
    color: white;
}

/* Nav Bar Section */

.navbar{
    background-color: #00001f;
    z-index: 100;
    display: fixed;
}

.navbar-brand img{
    width: 80px;
    height: 80px;
}

.about{
    background-color: #00001f;
    height: 100vh;
    width: 100%;
}

.about-text{
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-top: -100px;
}

/* About Me Section */

.about-text p,h5{
    font-weight: 400;
    margin-bottom: 10px;
    font-size: 35px;
    color: white;
    z-index: 10;
}

.about-text p{
    opacity: 0.7;
}

.about-text h1,span{
    font-weight: 700;
    z-index: 10;
}

.about-text h1{
    font-size: 80px;
}

.about-text h5{
    color: whitesmoke;
    font-size: 25px;
}

.about-text h5 span{
    font-size: 50px;
    opacity: none;
    color: white;
}

/* Blob Decoration Section Section */
.blob-one{
    width: 1000px;
    height: 1000px;
    position: absolute;
    top: -10%;
    left: -10%;
    overflow: hidden;
}

.blob-two{
    width: 1000px;
    height: 1000px;
    position: absolute;
    overflow: hidden;
    top: 28%;
    left: 70%;
}

我的目标是重现这样的东西：https://imgur.com/a/FEe3e3t
我非常感谢你的帮助。

css

1条答案

按热度按时间
6ljaweal

6ljaweal1#

您可以将两个Blob div Package 在相对定位的容器中。
此容器需要overflow:hidden属性。
然后，您可以使用负偏移，如下所示：

.blob-one{
  top:-25%;
  left:-10%;
}

.blob-two{
  right:-10%;
  bottom:-25%;
}

第一次
您也可以减少viewBox，以减少不必要的填补/周围空间。

赞(0）分享  回复(0）举报  2022-12-05
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com