SVG mask stroke color - html

Question

I really hope someone here can help me out, since i'm stuck for 3 days straight now.
I have a header image with half a circle cut out by using a SVG mask, this half circle needs to have a colored stroke but since it's a mask it won't let me do this. I have tried and searched everything, and came upon this codepen snippet which is using the SVG use tag: https://codepen.io/rewfergu/pen/oJCif
However, i can not get this to work at all.
Here is my SVG code including the white transparent stroke (as far as i got):
<div id="myCarousel" class="carousel carousel-fade slide myCarousel-slide" style="height:auto; max-height:499px; overflow:hidden">
<div class="carousel-inner" role="listbox">
<div id="slide2" class="item active" data-navpos="" data-navposarrow="" data-center="1" data-maxheight="499" data-id="2" style="height:499px;"><img id="slideimg2" class="logofull img-responsive" src="http://placehold.it/1800x499.jpg"></div>
</div>
</div>
<svg width="100%" height="100%">
<defs>
<style type="text/css"><![CDATA[
circle {
stroke: #942994;
stroke-width: 5;
}
]]></style>
<mask id="mask" x="0" y="0" width="100%" height="100%">
<rect x="0" y="0" width="100%" height="100%" fill="#fff"/>
<circle id="c1" cx="50%" cy="105%" r="180" fill="#000"/>
</mask>
</defs>
<rect x="0" y="0" width="100" height="50" mask="url(#mask)" fill-opacity="0.7"/>
</svg>
And my CSS, applied on my header image (the carousel is 100% width and around 500px high):
#myCarousel .item {
border-bottom: 5px solid #942994;
width: 100%;
height: 100%;
overflow-x: hidden;
overflow-y: hidden;
mask: url(#mask);
}
Unfortunately i can not use PNG's, because the header images need to be easily changable.
Update:
Created a new fiddle with my exact setup: https://jsfiddle.net/oqfdfart/2/
Also some strange behaviour: In Chrome, Edge and IE the half circle does not appear at all in the headerimage.
Update:
I found the answer, following my latest fiddle i've separated both SVG's like so:
<svg width="100%" height="100%">
<defs>
<style type="text/css"><![CDATA[
#inner {
stroke: #942994;
stroke-width: 5;
fill-opacity: 0;
z-index: 9999;
}
]]></style>
<mask id="mask" x="0" y="0" width="100%" height="100%">
<rect x="0" y="0" width="100%" height="100%" fill="#fff"/>
<circle id="c1" cx="50%" cy="105%" r="180" fill="#000"/>
</mask>
</defs>
<rect x="0" y="0" width="100" height="50" mask="url(#mask)" fill-opacity="0.7"/>
</svg>
<svg id="innercircle" width="100%" height="100%" x="0" y="0">
<circle id="inner" x="0" y="0" cx="50%" cy="105%" r="181" fill="#fff" />
</svg>
And added the following CSS:
#headeroverlay {
width: 100%;
position: absolute;
top:0;
background: rgba(255,255,255,0);
height: 499px;
z-index: -1;
}
#innercircle {
position: absolute;
top: 0;
left: 0;
}
First i had a very dark overlay on top of my headerimage, but this was fixed by giving #headeroverlay the z-index -1.
Maybe this solution is not so pretty since i had to define a fixed height for my headersection, but at least for this project that's no problem.
If someone has a better solution i'm very curious :)
Also i'm still stuck with Chrome, Edge and IE not rendering my SVG's at all.

Answer 1

Masks only affect the translucency of the element it is applied to.
If you want to outline the hole with a colour, then you'll need to create an element the same shape as the hole, then draw it on top of the masked element.