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>

有没有人知道如何实现这个目标？

请看我的小提琴 https://jsfiddle.net/xxfairydragonxx/1o40th7v/

Answer 1

您可以使用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的顶部。这将使黑色部分保持黑色并将青色部分变为白色。

瞧。

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

SVG重叠css三角形和颜色变化

1 个答案: