[英]SVG mask stroke color
我真的希望這里有人可以幫助我,因為我現在已經連續三天被困住了。
我有一個標頭圖像,使用SVG蒙版切出了半個圓圈,該半個圓圈需要有一個彩色筆觸,但是由於它是一個蒙版,所以我不允許這樣做。 我已經嘗試並搜索了所有內容,並遇到了使用SVG use標簽的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%,高度為500px):
#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;
}
首先,我在headerimage的頂部有一個非常暗的疊加層,但這已通過為#headeroverlay賦予z-index -1來解決。 也許這種解決方案不是很漂亮,因為我必須為標頭部分定義一個固定的高度,但是至少對於這個項目來說這沒有問題。 如果有人有更好的解決方案,我很好奇:)
另外,我仍然對Chrome,Edge和IE完全不渲染我的SVG。
遮罩只會影響所應用元素的半透明性。
如果要用顏色勾勒出孔的輪廓,則需要創建與孔相同形狀的元素,然后將其繪制在蒙版元素的頂部。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.