添加与面具的alpha混合

我想在黑暗中创造发光的幻觉，在这个例子中，我有两个矩形面罩，但你可以看到有一个alpha混合问题。有没有办法将2个面罩矩形合并在一起？添加与面具的alpha混合

将鼠标悬停在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

来源

2014-09-02 Jake Cattrall

是，只使用一个<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混合可能会更好看。

来源

2014-09-02 21:12:37

这完全是答案，但在实验中，我打破了codepen。我能添加第三个光源图吗？ – 2014-09-02 22:08:30

''元素只能接受两个输入，但是您可以通过在一个元素中添加'result'属性并将其用作另一个元素的'in'或'in2'属性从一个到另一个级联。在这里你去：http://codepen.io/anon/pen/DnEki – 2014-09-02 22:48:44

我需要能够以编程方式定位这些背景，但如果你像这里移动一个http://jsfiddle.net/krazyjakee/Lyaa6894/它的移动距离有限，而不会消失在黑暗中。过滤器尺寸是否有限制？ – 2014-09-03 16:30:46

添加与面具的alpha混合

回答

相关问题