Question

我想在黑暗中创造发光的幻觉，在示例中，我有两个相互叠加的矩形面具，但正如您所看到的那样，存在一个alpha混合问题。有没有办法将2个掩模合并在一起？

鼠标悬停在codepen链接上的窗口，看看我的意思。

<svg width="976" height="549" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <radialGradient id="lightsource">
            <stop offset="0%" stop-color="black" />
            <stop offset="50%" stop-color="black" />
            <stop offset="100%" stop-color="white" />
        </radialGradient>
        <mask id="mask1" x="0" y="0" width="976" height="549">
        <rect x="0" y="0" width="976" height="549" fill="white" />
        <ellipse ry="60" rx="64" id="svg_1" cy="122.5" cx="101.5" stroke-width="none" fill="url(#lightsource)"/>
        <ellipse ry="60" rx="64" id="svg_2" cy="175.5" cx="216" stroke-width="none" fill="url(#lightsource)"/>
        </mask>
    </defs>
    <g>
        <rect x="0" y="0" id="cool" width="976" height="549" mask="url(#mask1)" fill="black" />
    </g>
</svg>

http://codepen.io/anon/pen/cFAqx

Answer 1

是的，只需使用<feBlend>过滤器即可。在这种情况下，在正X方向和负X方向上偏移它们之后，将相同渐变蒙版的两个副本混合起来会更有意义。

<defs>
  <radialGradient id="lightsource">
    <stop offset="0%" stop-color="black" />
    <stop offset="50%" stop-color="black" />
    <stop offset="100%" stop-color="white" />
  </radialGradient>
  <mask id="mask1" x="0" y="0" width="976" height="549">
    <rect x="0" y="0" width="976" height="549" fill="white" />
    <ellipse filter="url(#f1)" ry="60" rx="64" id="svg" cy="122.5" cx="101.5" stroke-width="none" fill="url(#lightsource)"/>
  </mask>
  <filter id="f1" x="-100%" y="0" width="300%" height="100%">
    <feOffset result="light1" in="SourceGraphic" dx="-50" dy="0" />
    <feOffset result="light2" in="SourceGraphic" dx="50" dy="0" />
    <feBlend in="light1" in2="light2" mode="darken" />
  </filter>
</defs>

此处，<filter>元素创建椭圆的两个副本，并将它们与darken过滤器组合在一起。我已更新您的codepen以显示其正常工作：http://codepen.io/anon/pen/LtcIj

修改：实际上，multiply混合可能看起来更好。

添加alpha与面具混合

1 个答案: