我真的希望有人能帮助我，因为我已经卡了三天了。
我有一个头部图片，使用SVG遮罩剪切出了半个圆形，这个半圆需要有一个有色描边，但由于它是一个遮罩，所以它不会让我这样做。我尝试并搜索了所有东西，并找到了这个代码片段，它使用了SVG use标签：https://codepen.io/rewfergu/pen/oJCif。然而，我无法使其正常工作。
这是我的SVG代码，包括白色透明描边（就我所知）：
<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>
我的CSS应用在头部图像上（轮播图宽度为100%，高度约500px）：
#myCarousel .item {
border-bottom: 5px solid #942994;
width: 100%;
height: 100%;
overflow-x: hidden;
overflow-y: hidden;
mask: url(#mask);
}
很遗憾，我不能使用PNG格式的图片，因为头部图片需要易于更改。
更新： 使用完全相同的设置创建了一个新的 fiddle： https://jsfiddle.net/oqfdfart/2/。同时也存在奇怪的行为：在 Chrome、Edge 和 IE 中，半圆形根本不会出现在标题图像中。
更新： 我找到了答案，在最新的 fiddle 中，我将两个SVG分开，如下：
<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>
并添加了以下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;
}
我曾经在头部图像上有一个非常暗的叠加层，但是通过将#headeroverlay的z-index设置为-1来解决了这个问题。 也许这个解决方案不太漂亮，因为我必须为我的头部区域定义一个固定的高度，但至少对于这个项目来说这不是问题。 如果有人有更好的解决方案，我很好奇 :)
此外，我仍然无法在Chrome、Edge和IE中渲染我的SVG。