SVG面具描边颜色

Question

我真的很希望这里有人能帮助我，因为我现在连续坚持了3天。

我有一个标题图像，用SVG蒙版切出半个圆圈，这半圈需要有一个彩色笔划，但由于它是一个蒙版，它不会让我这样做。我尝试过搜索所有内容，并找到了这个使用SVG使用标签的codepen代码片段：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半圆不会在标题图片在所有出现。

更新： 我找到了答案，下面我最新的小提琴我已经分开两个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来修复的。 也许这个解决方案不是很漂亮，因为我必须为我的headerection定义一个固定的高度，但至少对于这个项目来说没有问题。 如果有人有一个更好的解决方案，我很好奇:)

此外，我仍然坚持铬，边缘和IE浏览器没有呈现我的SVG的。

Answer 1

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

如果要用颜色勾勒孔，则需要创建与孔相同形状的元素，然后将其绘制在蒙版元素的顶部。