3

我想使用 SVG 过滤器在图像上创建晕影。解决这个问题的最佳方法是什么？feFlood我已经尝试用渐变创建一个asflood-color但这不起作用。现在我正在使用 illustrator 中生成的 png，但我想将它全部保存在 svg 中。

为了说明我的目标，这是原文：

没有小插图

这就是应该的：

带小插图

更新：

我正在使用svg.js和svg.filter.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 回答
0

我的幻灯片共享前置过滤器中有一些晕影和选择合成方法。从第 50 页开始了解技术。这是最相关的过滤器代码。这不是一个真正的小插图 - 这需要更长的过滤器和选择性的图像组合，但它更容易理解。

 <filter>
        <feFlood id="flood-5" result="blackfield-6" x="0%" y="0%" width="100%" height="100%" result="blackfield-6" flood-color="#000000" flood-opacity="1"/>
        <feSpecularLighting id="specular-5" result="Spotlight-6" lighting-color="#FFFFFF" surfaceScale="1" specularConstant="1" specularExponent="120">
            <fePointLight id="pointlight-5" x="100" y="100" z="854"/>
        </feSpecularLighting>
        <feBlend id="svg-7" result="A-6" in="blackfield-6" in2="Spotlight-6" mode="lighten"/>
        <feBlend id="blend-5" result="B-6" in="A-6" in2="SourceGraphic" mode="multiply"/>
    </filter>
于 2013-08-02T22:11:43.287 回答