SVG：使用feBlend多重混合摆脱形状轮廓

我有一个SVG，我使用过滤器在黑色背景上使用多重混合来混合白色形状。由于我正在使用乘法，所以我希望白色的形状根本不会出现，但事实并非如此。在这个例子中我画在它自己的滤波器的正方形，然后一个较小的圆（也在其自身的滤波器）：SVG：使用feBlend多重混合摆脱形状轮廓

http://jsfiddle.net/mugwhump/SwcjL/2/

然而，有微弱的，像素宽的白色轮廓包围圈子。此轮廓的颜色和不透明度取决于用于绘制圆的颜色和不透明度。

如果我将圆移动到与正方形相同的滤镜组中，它就会消失，但不幸的是这不是一个选项。

任何想法如何摆脱这个大纲？这基本上发生在所有浏览器/渲染器中。

这里的SVG代码：

<svg contentScriptType="text/ecmascript" width="530" 
xmlns:xlink="http://www.w3.org/1999/xlink" zoomAndPan="magnify" 
contentStyleType="text/css" viewBox="0 0 530 530" height="530" 
preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" 
version="1.1"> 

<defs id="defs"> 
    <!--Blend using multiply. --> 
    <filter color-interpolation-filters="sRGB" x="-1.0" y="-1.0" width="3.0" 
     xmlns:xlink="http://www.w3.org/1999/xlink" xlink:type="simple" 
     xlink:actuate="onLoad" height="3.0" 
     xlink:show="other" id="blend-square-multiply"> 
     <feFlood result="blackness" flood-color="black"/> 
     <feComposite result="blackness clip" in="blackness" in2="SourceGraphic" operator="in"/> 
     <feColorMatrix in="SourceGraphic" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0" type="matrix" result="color-trans"/> 
     <feBlend mode="multiply" in="blackness clip" in2="color-trans"/> 
    </filter> 
</defs> 

<!-- White square blended with multiply over black feFlood --> 
<g filter="url(#blend-square-multiply)"> 
    <g fill="white" > 
     <rect x="200" width="100" y="200" height="100" /> 
    </g> 
</g> 
<!-- White circle blended with multiply over black feFlood 
Changing stroke width does nothing, but changing fill color changes 
the color of the outline (changing stroke-color does not). 
The outline disappears when opacity is set to 0. --> 
<g filter="url(#blend-square-multiply)"> 
    <g fill="white" opacity="1"> 
     <circle stroke-width="0" cx="250" cy="250" r="50"/> 
    </g> 
</g>

来源

2013-08-27 mugwhump