SVG 蒙版描边颜色

Question

我真的希望这里有人可以帮助我，因为我现在已经被困了 3 天了。

我有一个使用 SVG 蒙版切出半个圆圈的标题图像，这个半个圆圈需要有一个彩色笔触，但由于它是一个蒙版，它不会让我这样做。我已经尝试并搜索了所有内容，发现了这个使用 SVG 使用标签的 codepen sn-p：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% 宽度和大约 500 像素高）：

#myCarousel .item {
border-bottom: 5px solid #942994;
width: 100%;
height: 100%;
overflow-x: hidden;
overflow-y: hidden;
mask: url(#mask);
}

不幸的是，我不能使用 PNG，因为标题图像需要易于更改。

更新： 用我的确切设置创建了一个新小提琴：https://jsfiddle.net/oqfdfart/2/ 还有一些奇怪的行为：在 Chrome、Edge 和 IE 中，半圆根本没有出现在 headerimage 中。

更新： 我找到了答案，在我最新的小提琴之后，我像这样分开了两个 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;
}

首先，我的 headerimage 顶部有一个非常暗的叠加层，但是通过给 #headeroverlay 提供 z-index -1 来解决这个问题。 也许这个解决方案不是那么漂亮，因为我必须为我的标题部分定义一个固定的高度，但至少对于这个项目来说这没问题。 如果有人有更好的解决方案，我很好奇:)

此外，我仍然被 Chrome、Edge 和 IE 所困扰，根本无法渲染我的 SVG。

Answer 1

蒙版只影响它所应用的元素的半透明度。

如果您想用颜色勾勒出孔的轮廓，则需要创建一个与孔形状相同的元素，然后将其绘制在蒙面元素的顶部。