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

ソース グラフィックスは、フィルター パイプラインに渡される前にラスター化されるため、filterdom のしきい値に入るとベクトル的な性質が失われることに注意してください。

円要素には、そのエッジの周りにアンチエイリアシング別名半不透明ピクセルのエッジがあるため、その効果が得られます。それらに黒を掛けると灰色になります。

これを避けるには、 shape-rendering="crispEdges" を使用してください。または、feMorphology 侵食フィルタを使用して、アンチエイリアシングのエッジをクリップします。または、feFuncA フィルターを使用して、最初にこれらのエッジを完全に不透明にします。もう一度考えてみてください -- 最初のアイデアです。

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

于 2013-08-28T22:49:14.820 に答える
0

enable-background属性があなたの問題に対する答えかもしれないと思います。

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

于 2013-08-28T13:38:45.880 に答える