3

SVG フィルターを使用して画像にビネットを作成したいと思います。これにアプローチする最良の方法は何ですか？feFlood私はすでにグラデーションとしてを作成しようとしましたflood-colorが、うまくいきません。現在、イラストレーターで生成された png を使用していますが、すべて svg で保持したいと考えています。

私が何を目指しているかを説明するために、これはオリジナルです：

ビネットなし

そして、これはあるべきものです：

ビネット付き

アップデート：

コードを動的に生成するために、svg.filter.jsプラグインでsvg.jsを使用しています。これは私が試したものです：

// create svg canvas
var draw = SVG('canvas').size(400,400)

// define gradient
var gradient = draw.gradient('radial', function(stop) {
    stop.at({ offset: 0, opacity: 0 })
    stop.at({ offset: 1 })
})
gradient.radius('80%')

// create image
var image = draw.image('http://distilleryimage11.ak.instagram.com/89ac2e90d9b111e297bf22000a1f9263_7.jpg').size(400,400)

// add filter
image.filter(function(add) {
    add.blend(add.source, add.flood(gradient), 'multiply')
})

生成されたコードは次のとおりです。

<svg id="SvgjsSvg1000" xmlns="http://www.w3.org/2000/svg" version="1.1" width="400" height="400" xmlns:xlink="http://www.w3.org/1999/xlink"     style="position:relative;overflow:hidden;left:0px;top:0px;">
    <image id="SvgjsImage1005" xlink:href="http://distilleryimage11.ak.instagram.com/89ac2e90d9b111e297bf22000a1f9263_7.jpg" width="400" height="400" filter="url(    #SvgjsFilter1006)"></image>
    <defs id="SvgjsDefs1001">
        <radialGradient id="SvgjsRadialGradient1002" r="80%">
            <stop id="SvgjsStop1003" stop-opacity="0" offset="0"></stop>
            <stop id="SvgjsStop1004" offset="1"></stop>
        </radialGradient>
        <filter id="SvgjsFilter1006">
            <feFlood id="SvgjsFeFlood1007" in="SourceGraphic" result="SvgjsFeFlood1007Out" flood-color="url(#SvgjsRadialGradient1002)"></feFlood>
            <feBlend id="SvgjsFeBlend1008" in="SourceGraphic" result="SvgjsFeBlend1008Out" in2="SvgjsFeFlood1007Out" mode="multiply"></feBlend>
        </filter>
    </defs>
</svg>

その結果、完全に黒い画像になります。色で機能するため、feFlood 要素はグラデーションを塗りつぶしとして受け入れないようです。

サンプルコードのフィドルは次のとおりです。http://jsfiddle.net/wout/VmUu6/

4

2 に答える 2

1

これは、スポットライトを当てなくてもうまくいきました。色、停止点、不透明度を調整して、必要な効果を得ることができる複数の停止点を持つ放射状グラデーションを使用しています。r(radius を使って効果を広げたり縮めたり、fx,fy を使って位置を調整したりします。重い数学処理を必要とするフィルターを使用するよりも、グラデーションの方が効率的である傾向があります。

<radialGradient id="grad"
                fx="50%" fy="50%" r="55%"
                spreadMethod="pad">
    <stop offset="30%"   stop-color="#222222" stop-opacity="0"/>
    <stop offset="40%"   stop-color="#222222" stop-opacity="0.2"/>
    <stop offset="50%"   stop-color="#222222" stop-opacity="0.4"/>
    <stop offset="70%" stop-color="#222222" stop-opacity="0.6" />
    <stop offset="100%" stop-color="#222222" stop-opacity="1" />
</radialGradient>

画像の上に配置された長方形に適用

  <image id="background" x="0" y="0" width="800px" height="530px"  preserveAspectRatio="true"
     xlink:href="http://i1-qa.adis.ws/i/Client_23/ss_collection_reddress?w=800"/>
<rect filter="url(#blur)" style="fill:url(#grad)" x="0" y="0" width="800px" height="530px"/>

ビネットの例

于 2016-05-19T09:55:01.517 に答える