创建线性渐变SVG过滤器

从本质上讲，我试图使用SVG和CSS创建一个渐变alpha掩码（像这样），由于mask属性不再在标准轨道上，我正在探索filter路线。

我在Sketch中创建了一个垂直alpha掩码，顶部为0%#000000，底部为100%#000000，然后将其导出为SVG，并使用O’Reilly文章中的指导对其进行了调整。现在看起来是这样的：

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
        <!-- Start by creating our vertical linear gradient -->
        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="alphaLinear">
            <stop offset="0%" style="stop-color: #000000; stop-opacity: 0%;" />
            <stop offset="100%" style="stop-color: #000000; stop-opacity: 100%;" />
        </linearGradient>
        <!-- Create a rectangle and apply the gradient as its fill -->
        <rect id="boxRect" x="0" y="0" width="100%" height="200" style="fill: url(#alphaLinear);" />
        <!-- Using that rectangle, we'll create a filter -->
        <filter id="alphaGrad">
            <feImage xlink:href="#boxRect" result="grad"/>
            <feDisplacementMap scale="10" xChannelSelector="R" yChannelSelector="G" in="SourceGraphic" in2="grad"/>
        </filter>
    </defs>
    <use id="gradientBox" fill="url(#alphaGradient)" xlink:href="#boxRect"></use>
</svg>

我对SVG的了解不是最好的，所以我怀疑这就是我错的地方。

接下来，我使用filter（和-webkit-filter）应用过滤器，并引用过滤器ID #alphaGrad:

-webkit-filter: url('http://blahblah.com/alphagradient.svg#alphaGrad');

但是，当然，这是行不通的。有人能帮我掌握窍门吗？或者这可能吗？如果没有，有人能推荐一种如何实现这一目标的方法吗？

提前感谢！

更新：这是我正在做的一件非常基本的事情。。。

您的示例中存在许多错误和误解（为什么您认为置换映射会对您有所帮助？）

为什么不从下面的代码开始呢？使用SVG掩码和SVG图像的纯SVG。

<svg width="600px" height="600px" viewbox="0 0 600 600">
    <defs>
        <linearGradient id="alphaLinear">
            <stop offset="0%" stop-color="#FFFFFF" stop-opacity="0%" />
            <stop offset="100%" stop-color="#999999" stop-opacity="100%" />
        </linearGradient>
        <mask id="Mask">
            <rect x="0" y="0" width="600" height="600" fill="url(#alphaLinear)"  />
        </mask>
    </defs>
    <image xlink:href="http://upload.wikimedia.org/wikipedia/commons/7/71/Anadama_bread_(1).jpg" width="600" height="600" x="0" y="0" preserveAspectRatio="xMinYMin meet"     mask="url(#Mask)"/>
</svg>

少数备注：

SVG（和CSS）opacity值不是percentual范围，而是0.0-1.0范围。
提到的mask属性似乎只是在Webkit中加了前缀，在Gecko中未加前缀。
如果您的目标环境是HTML+CSS，那么您可能不一定需要SVG：使用线性渐变和RGBA可以获得类似的效果CCD_ 10在某个叠加（伪）元素上。那么CCD_ 11可能是有用的。

相关内容

最新更新

热门标签：