Inverse transparent area in SVG - html

Question

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

Answer 1

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.