加法 alpha 与蒙版混合

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 方向偏移后混合会更有意义。

<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 混合可能会更好看。