CSS Question
Inline SVG not scaling to parent
I'm trying to use svg to emulate clippath since the cross browser support is not very good but everytime I try I encounter the same problem: the svg works but it's small and doesn't scale to the element i'm applying it to. I tried everything but I can't seem to make out the error
<div id="container">
<div id="target">
<div id="Box_Collectors">
<div class="blackBox">
<h1>TITLE</h1>
<div>One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections. The bedding was hardly able to cover it and seemed ready to slide off any moment. His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked.</div>
</div>
<div class="blackBox">
<h1>TITLE</h1>
<div> One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections. The bedding was hardly able to cover it and seemed ready to slide off any moment. His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked.</div>
</div>
<div class="blackBox">
<h1>TITLE</h1>
<div>One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections. The bedding was hardly able to cover it and seemed ready to slide off any moment. His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked. </div>
</div>
</div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:ev="http://www.w3.org/2001/xml-events"
class="" viewBox="0 0 100 100" clipPathUnits="objectBoundingBox">
<defs>
<clipPath id="blackBox-clip">
<polygon points="100 0, 100 100, 0 100, 0 35, 15 25, 0 15, 0 0"></polygon>
</clipPath>
</defs>
</svg>
</div>
here is the css:
*{color:#fff}
.blackBox{background:#000;position:relative;z-index:100;height:300px;width:300px;margin: auto;padding-left:60px;
/*-webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 35%, 15% 25%, 0 15%, 0 0);
clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 35%, 15% 25%, 0 15%, 0 0);*/
-webkit-clip-path: url("#blackBox-clip");
clip-path: url("#blackBox-clip");
}
https://jsfiddle.net/Aivirth/dxa890mq/ to demonstrate the problem
Recommended for you: Get network issues from WhatsUp Gold. Not end users.
Answer Source
You need two things to make this work. First clipPathUnits belongs to the clipPath element, and the units used for objectBoundingBox are fractions of the bounding box. This will do what you want:
<clipPath id="blackBox-clip" clipPathUnits="objectBoundingBox">
<polygon points="1 0, 1 1, 0 1, 0 0.35, 0.15 0.25, 0 0.15, 0 0"></polygon>
</clipPath>
* {
color: #fff
}
.blackBox {
background: #000;
position: relative;
z-index: 100;
height: 300px;
width: 300px;
margin: auto;
padding-left: 60px;
/*-webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 35%, 15% 25%, 0 15%, 0 0);
clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 35%, 15% 25%, 0 15%, 0 0);*/
-webkit-clip-path: url("#blackBox-clip");
clip-path: url("#blackBox-clip");
}<div id="container">
<div id="target">
<div id="Box_Collectors">
<div class="blackBox">
<h1>TITLE</h1>
<div>One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided
by arches into stiff sections. The bedding was hardly able to cover it and seemed ready to slide off any moment. His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked.</div>
</div>
<div class="blackBox">
<h1>TITLE</h1>
<div>One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided
by arches into stiff sections. The bedding was hardly able to cover it and seemed ready to slide off any moment. His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked.</div>
</div>
<div class="blackBox">
<h1>TITLE</h1>
<div>One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided
by arches into stiff sections. The bedding was hardly able to cover it and seemed ready to slide off any moment. His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked.</div>
</div>
</div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events" class="" viewBox="0 0 100 100">
<defs>
<clipPath id="blackBox-clip" clipPathUnits="objectBoundingBox">
<polygon points="1 0, 1 1, 0 1, 0 0.35, 0.15 0.25, 0 0.15, 0 0"></polygon>
</clipPath>
</defs>
</svg>
</div>
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download