SVG / Layer在IE和Webkit中不起作用，但Firefox很好

Question

我完全陷入困境，我真的需要帮助！

下面是我的片段，我已经尽可能地减少并编辑了一些以正确显示在jsfiddle上。 这里还有JSFiddle：https://jsfiddle.net/oqfdfart/9/

我需要的是：我的标题中有一个透明的半圆，可以通过我的bg图像，但也有一个边框。我设法用2个SVG做了这个。

但是只有firefox显示一切正常，但所有其他浏览器都没有。

我永远感激任何帮助！

$(document).ready(function() {

  var $myCarousel = $('#myCarousel');

  function setCaptTotalheight(captid, maxheight) {

    setTimeout(function() {

      sliderheight = $('#slideimg' + captid).height();
      //alert(sliderheight);
      if (sliderheight > 0) {

        if (sliderheight > maxheight) {
          useheight = maxheight;
        } else {
          useheight = sliderheight;
        }

        $('.container-carousel').attr('style', 'height:' + useheight + 'px;padding:0px; overflow:hidden;');
        $('.header-carousel').attr('style', 'height:' + useheight + 'px; overflow:hidden;');
        $('#slide' + captid).attr('style', 'height:' + useheight + 'px;');

      }

    }, 5);

  }


  function setCaptheight(captid, maxheight) {}


  var $navElemsId = $myCarousel.find('.item:first').attr('data-id');
  var $navElemsCenter = $myCarousel.find('.item:first').attr('data-center');
  var $navElemsMaxHeight = $myCarousel.find('.item:first').attr('data-maxheight');

  if ($navElemsCenter == 1) {
    setCaptTotalheight($navElemsId, $navElemsMaxHeight);
    setCaptheight($navElemsId, $navElemsMaxHeight);
  }

  if ($navElemsCenter == 2) {
    setCaptTotalheight($navElemsId, $navElemsMaxHeight);
  }


});

@import url( 'https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css' );
@import url( 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' );

body{
    background: #eee;
}

#headeroverlay {
    width: 100%;
    height: 100%;
}

.carousel {
    background: url(http://placehold.it/230x50) no-repeat 50% 95%;
}

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

.nopadding {
    padding: 0;
}

#headeroverlay {
    width: 100%;
    position: absolute;
    top:0;
    background: rgba(255,255,255,0);
    height: 223px;
    z-index: auto;
}

#innercircle {
    position: absolute;
    top: 0;
    left: 0;
}

<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="mp-pusher maincontainer maincontainer-602" id="mp-pusher" style="position:inherit">

<div class="container-fluid container-fluid-header header-container-above-menu container-carousel" style="height:auto; max-height:499px; overflow:hidden; padding:0px;"><!-- start carousel -->

<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=""><img id="slideimg2" class="logofull img-responsive" src="http://placehold.it/1920x499" /></div>
    </div>
</div>

<section id="headeroverlay" class="headeroverlay">

<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"/>
</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>

</section>

</div>