Question

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

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

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

知道如何摆脱那个大纲吗？这基本上发生在所有浏览器/渲染器中。

这是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>

Answer 1

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

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

Answer 2

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

您正在获得该效果，因为圆形元素具有抗锯齿的边缘，也就是其边缘周围的半透明像素。当那些乘以黑色时，你会变灰。

使用shape-rendering =“crispEdges”来避免这种情况。或者使用feMorphology erode过滤器剪切抗锯齿的边缘。或者使用feFuncA过滤器首先将这些边缘拨到完全不透明度。第二个想法 - 第一个想法。

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

SVG：使用feBlend乘法混合去除形状轮廓

2 个答案: