I'm facing a challenging issue: I want to change the color of an SVG line as it intersects with a triangular background created using CSS.
Although I've experimented with gradients, they don't produce the desired effect.
My goal is for the SVG stroke color to switch to white when it crosses into the red triangle, maintaining the diagonal transition. Unfortunately, after trying various approaches involving layers and SVGs, I haven't found a solution yet.
This is my code:
.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>If you have any suggestions on how to achieve this, I would greatly appreciate them.
Please view my fiddle https://jsfiddle.net/xxfairydragonxx/1o40th7v/