Html Question posted in
Some basic documentation can be found here.

Html – How can I remove the red part of the svg so that whatever behind it is showing?

How can I remove the red part of the svg kinda like how when you remove the background of an image for example the file turns into a png and the part you removed shows the checkered pattern.

After removing the red part, the orange color from the section should be showing.

* {
  padding: 0;
  margin: 0;
}
body {
  background: orange;
}
<section>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 100" fill="#FF0000">
    <rect fill="#FFF" width="100%" height="100%"/>
    <path d="M0 0v100c166.7 0 166.7-66 333.3-66S500 77 666.7 77 833.3 28 1000 28V0H0Z" opacity=".5"></path>
    <path d="M0 0v100c166.7 0 166.7-66 333.3-66S500 70 666.7 70 833.3 16 1000 16V0H0Z" opacity=".5"></path>
    <path d="M0 0v100c166.7 0 166.7-66 333.3-66S500 63 666.7 63 833.3 4 1000 4V0H0Z"></path>
  </svg>
</section>
Tags:

3

Answers


  1. 0

    Try changing the fill of rect.

    You may think about using CSS filter, but there are many difficulties because the elements that can be controlled are red.

    I hope it helps 🙂

    Method1

    A new svg image

    I worked with illustration and photoshop and saved it as an svg file.

    So, you can get white elemnt, transparent background

    enter image description here

    * {
  padding: 0;
  margin: 0;
}

body {
  background: orange;
}
    <section>
  <svg version="1.1" id="Layer_1" xmlns:x="&ns_extend;" xmlns:i="&ns_ai;" xmlns:graph="&ns_graphs;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1000.9 96.4" style="enable-background:new 0 0 1000.9 96.4;"
    xml:space="preserve">
    <style type="text/css">
      .st0{opacity:0.5;fill:#FFFFFF;}
      .st1{fill:#FFFFFF;}
    </style>
    <switch>
      <foreignObject requiredExtensions="&ns_ai;" x="0" y="0" width="1" height="1">
        <i:aipgfRef  xlink:href="#adobe_illustrator_pgf">
        </i:aipgfRef>
      </foreignObject>
      <g i:extraneous="self">
        <path class="st0" d="M1000.9,0.3v96.2H0c0,0,78.3,2.1,163.7-31.9s159.4-41.9,265.7-29.9c100.7,11.4,139.9,29.1,252.5,23.8
          c121.2-5.6,139-28,194.4-43.1C944.8-3.3,1000.9,0.3,1000.9,0.3z"/>
        <path class="st0" d="M1000.9,12.5v83.9H0c0,0,78.3,2.1,163.7-31.9s169.4-45.1,265.7-28.4c96.9,16.8,139.9,33,252.5,29.5
          c121.2-3.7,138.4-27.2,194.4-40C944.3,10.1,1000.9,12.5,1000.9,12.5z"/>
        <path class="st1" d="M1000.9,24.5v71.9H0c0,0,78.3,2.1,163.7-31.9s165.5-44.5,261.7-27.8c96.9,16.8,143.5,38.5,256.1,35
          c121.2-3.7,125.2-20.7,195.3-35.6C945.1,21.7,1000.9,24.5,1000.9,24.5z"/>
      </g>
    </switch>
</section>

    Method2

    Red path to orange

    The svg currently has the part represented in red as an object. It’s hard to change it to transparent. You can match it with the background color.

    * {
  padding: 0;
  margin: 0;
}

body {
  background: orange;
}
    <section>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 100" fill="orange">
    <rect fill="#fff" width="100%" height="100%"/>
    <path d="M0 0v100c166.7 0 166.7-66 333.3-66S500 77 666.7 77 833.3 28 1000 28V0H0Z" opacity=".5"></path>
    <path d="M0 0v100c166.7 0 166.7-66 333.3-66S500 70 666.7 70 833.3 16 1000 16V0H0Z" opacity=".5"></path>
    <path d="M0 0v100c166.7 0 166.7-66 333.3-66S500 63 666.7 63 833.3 4 1000 4V0H0Z"></path>
  </svg>
</section>

    Remove white background

    Method1

    * {
  padding: 0;
  margin: 0;
}

body {
  background: orange;
}
    <section>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 100" fill="#FF0000">
    <rect fill="transparent" width="100%" height="100%"/>
    <path d="M0 0v100c166.7 0 166.7-66 333.3-66S500 77 666.7 77 833.3 28 1000 28V0H0Z" opacity=".5"></path>
    <path d="M0 0v100c166.7 0 166.7-66 333.3-66S500 70 666.7 70 833.3 16 1000 16V0H0Z" opacity=".5"></path>
    <path d="M0 0v100c166.7 0 166.7-66 333.3-66S500 63 666.7 63 833.3 4 1000 4V0H0Z"></path>
  </svg>
</section>

    Method2

    There is also a way to set transparency.

    For example, I adjusted it moderately.

    * {
  padding: 0;
  margin: 0;
}

body {
  background: orange;
}
    <section>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 100" fill="#FF0000">
    <rect fill="#fff" fill-opacity="0.2" width="100%" height="100%"/>
    <path d="M0 0v100c166.7 0 166.7-66 333.3-66S500 77 666.7 77 833.3 28 1000 28V0H0Z" opacity=".5"></path>
    <path d="M0 0v100c166.7 0 166.7-66 333.3-66S500 70 666.7 70 833.3 16 1000 16V0H0Z" opacity=".5"></path>
    <path d="M0 0v100c166.7 0 166.7-66 333.3-66S500 63 666.7 63 833.3 4 1000 4V0H0Z"></path>
  </svg>
</section>
    Login or Signup to reply.
  2. 0

    Effect of removing the red part of the SVG so that the underlying orange background shows through, you need to modify the SVG to make its fill transparent where you want it to show the background color.

    Set the fill of the rect and path elements to none where you want transparency.
    Ensure the paths you want to be transparent have fill="none" or fill-opacity="0" properties.

    Code should be like this.

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    * {
      padding: 0;
      margin: 0;
    }
    body {
      background: orange;
    }
    section {
      position: relative;
      width: 1000px; /* Set the width to match the SVG viewBox */
      height: 100px; /* Set the height to match the SVG viewBox */
    }
  </style>
</head>
<body>
  <section>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 100">
      <rect fill="none" width="100%" height="100%"/>
      <path d="M0 0v100c166.7 0 166.7-66 333.3-66S500 77 666.7 77 833.3 28 1000 28V0H0Z" fill="none" opacity=".5"></path>
      <path d="M0 0v100c166.7 0 166.7-66 333.3-66S500 70 666.7 70 833.3 16 1000 16V0H0Z" fill="none" opacity=".5"></path>
      <path d="M0 0v100c166.7 0 166.7-66 333.3-66S500 63 666.7 63 833.3 4 1000 4V0H0Z" fill="none"></path>
    </svg>
  </section>
</body>
</html>

    Now, when you view this HTML, the red fill will be removed, and you should see the orange background through the SVG paths.

    Login or Signup to reply.
  3. 0 
     <section>
    <svg xmlns="http://www.w3.org/2000/svg" view Box="0 0 1000 100">
        <react fill="#FFF" width="100%" height="100%"/>
        <path d="M0 0v100c166.7 0 166.7-66 333.3-66S500 77 666.7 77 833.3 28 1000 28V0H0Z" opacity=".5"></path>
        <path d="M0 0v100c166.7 0 166.7-66 333.3-66S500 70 666.7 70 833.3 16 1000 16V0H0Z" opacity=".5"></path>
        <path d="M0 0v100c166.7 0 166.7-66 333.3-66S500 63 666.7 63 833.3 4 1000 4V0H0Z" fill="none"></path>
    </svg>
</section>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search