2

我有一个 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>

4

2 回答 2

0

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

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

于 2013-08-28T13:38:45.880 回答
0

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

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

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

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

于 2013-08-28T22:49:14.820 回答