SVG重疊css三角形和顏色變化

我有最糟糕的問題要弄清楚：我試圖改變一個SVG線的顏色，因爲它跨過用css創建的三角背景。SVG重疊css三角形和顏色變化

我試圖使用漸變，看起來不錯，但它不完全是我想要的效果。

我希望它能讓svg描邊顏色隨着跨越到紅色三角形中而考慮到對角線效應而變爲白色。我得出的結論是，這是不可能的。我已經嘗試過圖層和SVG，但似乎找不到辦法。

我的代碼：

.triangle2 { 
 
    background: rgba(0, 0, 0, 0) linear-gradient(to left bottom, transparent 50%, #ed1d25 50%) repeat scroll 0 0; 
 
    bottom: 0; 
 
    height: 295px; 
 
    position: absolute; 
 
    width: 100%; 
 
    z-index: 7; 
 
    } 
 
    .layer-id-6 { 
 
    height: 100%; 
 
    position: absolute; 
 
    top: 0; 
 
    width: 100%; 
 
    z-index: 99; 
 
    }

<div class="triangle2"> </div> 
 

 
    <div class="layer-id-6"> 
 

 
    <svg id="Layer_6" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" x="100%" y="100%" style="height: 100%"> 
 

 
    <g class="all"> 
 

 
    <line id="line25" x1="62.4%" y1="0" x2="62.4%" y2="100%" stroke="#000" style="fill:none; stroke-width: 20" /> 
 

 
    </g> 
 
    </svg> 
 
    </div>

有沒有人對我怎樣才能做到這一點任何想法？

請參閱我的小提琴 https://jsfiddle.net/xxfairydragonxx/1o40th7v/

來源

2016-12-06 fairydragon

背景三角形是HTML還是SVG的實際要求？如果兩者都是SVG，則可以使用SVG過濾器來實現。另外，對於這個問題的絆腳石，你可能應該包括兩張照片，一張是你目前得到的，另一張是你想得到的。 – jcaron

你可以得到你想要使用mix-blend-mode和SVG的額外副本什麼。

body { 
 
    background-color: white; 
 
} 
 

 
.triangle2 { 
 
    background: rgba(0, 0, 0, 0) linear-gradient(to left bottom, transparent 50%, #ed1d25 50%) repeat scroll 0 0; 
 
    bottom: 0; 
 
    height: 295px; 
 
    position: absolute; 
 
    width: 100%; 
 
    z-index: 7; 
 
} 
 
.layer-id-6 { 
 
    height: 100%; 
 
    
 
    position: absolute; 
 
    top: 0; 
 
    width: 100%; 
 
    z-index: 99; 
 
    mix-blend-mode: difference; 
 
} 
 

 
.layer-id-6.version2 { 
 
    mix-blend-mode: color-dodge; 
 
}

<div class="triangle2"> </div> 
 

 
<div class="layer-id-6"> 
 
    <svg id="Layer_6" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" x="100%" y="100%" style="height: 100%"> 
 
    <line id="line25" x1="62.4%" y1="0" x2="62.4%" y2="100%" stroke="#fff" style="fill:none; stroke-width: 20" /> 
 
    </svg> 
 
</div> 
 

 
<div class="layer-id-6 version2"> 
 
    <svg id="Layer_6" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" x="100%" y="100%" style="height: 100%"> 
 
    <line id="line25" x1="62.4%" y1="0" x2="62.4%" y2="100%" stroke="#fff" style="fill:none; stroke-width: 20" /> 
 
    </svg> 
 
</div>

這是如何工作是我們改變<line>顏色爲白色，並應用mix-blend-mode: difference。當與白色背景混合時，白線變成黑色，並且在紅色三角形上顯示爲青色。

然後我們有另一份SVG直接在mix-blend-mode: color-dodge之上。這將保持黑色部分變黑，並將青色部分變成白色。

Voila。

唯一的障礙是（當然）IE和Edge不支持mix-blend-mode。

來源

2016-12-07 02:59:09

SVG重疊css三角形和顏色變化

回答

相關問題