0

I have a full width header div with a color background:

<div style="background:red;" id="header">
</div>

I want to cut out the red background according to a path in the SVG file so that the svg paths are see throughout/transparent. Cutting through the red and showing whatever is behind the red background.

Header knockout svg

I have tried to embed the svg code and using the clip-path CSS property:

clip-path: url(mySVGfile.svg#myClipPath);

Referencing the path set here:

<clipPath id="myClipPath">

    <path fill="#FFFFFF" d="..."
/>

</clipPath>
danelig
  • 373
  • 1
  • 4
  • 18
  • 1
    As I read it, you want to have a table (the red div) and when you place something on top it cuts through the table and you get to see the floor? – Danny '365CSI' Engelman Aug 31 '22 at 18:29
  • Yes correct! Thanks. Image added above. The svg is a logo but for now the shapes above represent svg paths (cut out) – danelig Aug 31 '22 at 18:39

1 Answers1

0

You don't need to reference your file and include it inside your code at the same time. Hope this helps.

#behind{
position:absolute
}
#masked{
position: relative;
background:red;
height:100px;
clip-path:url(#mask)
}
<div id="behind"><h1>THE TEXT BEHIND THE MASK</h1></div>
<div id="masked">I'm<br>inside here</div>
<svg>
  <defs>
    <clipPath id="mask" >
      <path id="curve" d="M 0 0 L 200 100 L 0 100 z" />
    </clipPath>
  </defs>
</svg>
BehRouz
  • 1,209
  • 1
  • 8
  • 17
  • Thanks - I have added an image to original questions to explain better with visual concept. – danelig Aug 31 '22 at 18:40
  • Great. Check out this question: https://stackoverflow.com/questions/48737295/create-a-reverse-clip-path-css-or-svg This may be helpful. – BehRouz Aug 31 '22 at 18:44