jquery - 与蒙版混合的附加 alpha

Question

我想在黑暗中创造发光的幻觉，在这个例子中我有两个矩形 mask 在彼此之上，但正如您所看到的，存在 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混合可能看起来更好。