SVG面具描邊顏色

我真的很希望這裏有人能幫助我，因爲我現在連續堅持了3天。SVG面具描邊顏色

我有一個標題圖像，用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的。

來源

2017-04-26 user7924556

好吧，我用你的例子在jsfiddle中玩了一下。 https://jsfiddle.net/ojvaevLs/ 我不是那麼熟悉SVG，但perhabs jsfiddle會幫助你前進。 – JoeriSmits

嗨Joeri，謝謝你看我的問題。我已經試過你的代碼，但它卻顯示了沒有邊框的半圓。我意識到我沒有包含我的旋轉木馬HTML，所以我現在已經將它添加到了我原來的文章中。當我的HTML添加到你的小提琴時，它根本沒有顯示任何邊框。有什麼想法嗎？ – user7924556

蒙版隻影響它所應用的元素的半透明度。

如果要用顏色勾勒孔，則需要創建與孔相同形狀的元素，然後將其繪製在蒙版元素的頂部。

來源

2017-04-27 04:48:52

嗨保羅，我認爲這是Joeri在他的小提琴中試圖做的事情，但是在應用於我的情況時，它並沒有做任何事情。任何想法，我在做什麼錯了？（我當然試圖在面具外面定義第二個圓） – user7924556

如果你發佈或鏈接你所做的，我們會更容易告訴你你做錯了什麼:) –

嗨，保羅，我創建了一個小提琴：https://jsfiddle.net/dpp4q4om/5/ 不知何故，第二個圓圈一直向下移動，在我的實際設計中，它不再可見。（我會盡力在今天晚些時候提供更好的鏈接' – user7924556

SVG面具描邊顏色

回答

相關問題