SVG：使用 feBlend 多重混合去除形状轮廓答案

【问题标题】：SVG: getting rid of shape outlines using feBlend multiply blendingSVG：使用 feBlend 多重混合去除形状轮廓
【发布时间】：2013-08-30 19:39:55
【问题描述】：

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

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>

【问题讨论】：

标签： svg svg-filters

【解决方案1】：

请记住，源图形在被传递到过滤器管道之前会被光栅化，因此当它们进入过滤器域的阈值时会摆脱它们的矢量性质。

你得到了这种效果，因为圆形元素的边缘有一个抗锯齿边缘，也就是它的边缘周围的半透明像素。当这些乘以黑色时，你会得到灰色。

使用 shape-rendering="crispEdges" 来避免这种情况。或者使用 feMorphology 侵蚀过滤器来剪裁抗锯齿的边缘。或者使用 feFuncA 过滤器首先将这些边缘调到完全不透明度。再想一想——第一个想法。

<circle shape-rendering="crispEdges" stroke-width="0" cx="250" cy="250" r="50"/>

【讨论】：

【解决方案2】：

我认为enable-background 属性可能是您问题的答案。

http://www.w3.org/TR/SVG/filters.html#EnableBackgroundProperty

【讨论】：