SVGのオーバーラップcssの三角形とカラーの変更

Question

私は、最悪の問題を抱えています。私はSVGラインの色をcssで作成された三角形の背景を横切るように変更しようとしています。

私はグラデーションを使用しようとしましたが、これはうまく見えますが、それは私が望む効果ではありません。

斜め効果を考慮して、赤い三角形に横切るときにsvgストロークの色が白に変わるようにしたいと思います。私は不可能であるという結論に達しました。私はレイヤーとsvgsを試しましたが、それを行う方法を見つけることができないようです。

マイコード：

.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>

誰もが、私はこれを達成する方法上の任意のアイデアを持っていますか？

あなたがmix-blend-modeとSVGの余分なコピーを使用して欲しいものを得る取得することができます私のバイオリン https://jsfiddle.net/xxfairydragonxx/1o40th7v/

Answer 1

を参照してください。この仕組み

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を適用することです。白い背景とブレンドすると、白い線は黒色になり、赤い三角形の上にシアン色で表示されます。

次に、もう1つのSVGのコピーが、mix-blend-mode: color-dodgeの直上にあります。これにより、黒の部分が黒色になり、シアンの部分が白くなります。

Voila。

（もちろん）IEとEdgeはmix-blend-modeをサポートしていません。