CODEWITHSUNDEEP
htmlcsssvg
NewCod3r
NewCod3r

Reputation: 1258

Inverse transparent area in SVG

I have this SVG :

<svg class="decor" height="100%" preserveAspectRatio="none" version="1.1" viewBox="0 0 100 100" width="100%" xmlns="http://www.w3.org/2000/svg">
  <path d="M0 0 L50 100 L100 0 L100 100 L0 100" stroke-width="0"></path>
</svg>

This works but I need to have transparent outer and black color inner. In my code this is currently inverse.

How to generate this?

DEMO

Upvotes: 2

Views: 961

Answers (1)

Harry
Harry

Reputation: 89750

Just change the coordinates of your SVG path (d attribute) to form a triangle instead of the shape.

The modified path (d="M0 0 L50 100 L100 0z") works as follow:

  • M0 0 - Moves the pen to 0,0 (top left corner)
  • L 50 100 - Draws a line from 0,0 to 50,100 (which is bottom center point)
  • L 100 0 - Draws a line from 50,100 to 100 0 (which is top right corner)
  • z - Closes the path by drawing a line from the last point (100,0) to the first point (0,0)

SVG path elements by default get a black colored fill and hence the triangle gets colored black whereas the outside remains transparent.

* {
  background: #e1e1e1;
}
.decor {
  height: 80px
}
<div class="decor">
  <svg class="decor" height="100%" preserveAspectRatio="none" version="1.1" viewBox="0 0 100 100" width="100%" xmlns="http://www.w3.org/2000/svg">
    <path d="M0 0 L50 100 L100 0z" stroke-width="0"></path>
  </svg>
</div>

Clip Image using Path:

If the need is to use the path to clip background image into the required shape then it would be better to use clipPath element and clip-path CSS property like in the below snippet:

* {
  background: #e1e1e1;
}
.decor {
  height: 80px;
  background: url(http://lorempixel.com/200/80);
  -webkit-clip-path: url(#clipper);
  clip-path: url(#clipper);
}
<div class="decor">
  <svg height="0" preserveAspectRatio="none" version="1.1" viewBox="0 0 100 100" width="0" xmlns="http://www.w3.org/2000/svg">
    <defs>
      <clipPath id="clipper" clipPathUnits="objectBoundingBox">
        <path d="M0 0 L.5 1 L1 0z"></path>
      </clipPath>
    </defs>
  </svg>
</div>

Putting all the pieces together, the below code should achieve the output that was provided in the image.

.div-1 {
  position: relative;
  height: 500px;
  width: 100%;
}
.decor-top {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('http://lorempixel.com/550/500');
  -webkit-clip-path: url(#clipper);
  clip-path: url(#clipper);
}
.div-2 {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 50%;
  width: 100%;
  background-image: url('http://kinderhtml.themerex.net/img/bg/texture_2.png');
  background-color: green;
  -webkit-clip-path: url(#clipper2);
  clip-path: url(#clipper2);
}
<div class="div-1">
  <div class="decor-top">
    <svg height="0" preserveAspectRatio="none" version="1.1" viewBox="0 0 100 100" width="0" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <clipPath id="clipper" clipPathUnits="objectBoundingBox">
          <path d="M0 0 L.5 .1 L1 0 1,1 0,1z"></path>
        </clipPath>
      </defs>
    </svg>
  </div>
  <div class="div-2">
    <svg height="0" preserveAspectRatio="none" version="1.1" viewBox="0 0 100 100" width="0" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <clipPath id="clipper2" clipPathUnits="objectBoundingBox">
          <path d="M0 0 L.5 .25 L1 0 1,1 0,1z"></path>
        </clipPath>
      </defs>
    </svg>
  </div>
</div>

The original path (d="M0 0 L50 100 L100 0 L100 100 L0 100") worked as follows:

  • M0 0 - Moves the pen to 0,0 (top left corner)
  • L 50 100 - Draws a line from 0,0 to 50,100 (which is bottom center point)
  • L 100 0 - Draws a line from 50,100 to 100 0 (which is top right corner)
  • L 100 100 - Draws a line from 100,0 to 100,100 (which is bottom right corner)
  • L0 100 - Draws a line from 100,100 to 0,100 (which is bottom left corner)

Thus the above path ends up a forming a shape which looks like a rectangle with a triangle cut-out at the top.

Upvotes: 1

Related Questions