How to position a <SVG> element absolutely without showing Overflow答案

【问题标题】：How to position a <SVG> element absolutely without showing OverflowHow to position a <SVG> element absolutely without showing Overflow
【发布时间】：2022-12-02 03:10:59
【问题描述】：

Hello I am trying to design a portfolio website and I'm facing an issue when I try to position two blobs inside a <svg> tag. I want to position two blobs on the top left and bottom right corner but since the size of the svg's are getting affected differently depending upon setting position to 'absolute' or 'relative'. I want them to cut off the div borders but they cause a overflow in my case which is undesirable for me. Please follow the link below for a reproduction of this problem.

Link : https://portfolio-judesavio.vercel.app/

I am also attaching my code for your reference :

HTML FILE

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

*{
    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%;
}

I am aiming to recreate something like this : https://imgur.com/a/FEe3e3t

Any and all of your help is deeply appreciated.

【问题讨论】：

标签： html css svg css-position

【解决方案1】：

You can wrap both blob divs in a relative positioned container.
This container needs a overflow:hidden property.

Then you can use negative offsets like so:

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

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

.about{
  position: relative;
  height:100vmin;
  overflow: hidden;
}

.blob-one,
.blob-two{
  position:absolute;
  width:33%;
  aspect-ratio:1/1;
}


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

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

<!-- Hero Section -->
<section class="about">
  <!-- Blob Decoration Section-->
  <div class="blob-one">
    <svg viewBox="50 50 500 500" 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 500 500" 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>

You might also reduce the viewBox to reduce unnecessary padding/surrounding space.

【讨论】：