Question

基本上我正在尝试使用SVG和CSS（like this）创建渐变alpha蒙版，并且由于mask属性为no longer on the standards，我正在探索{{ 3}}

我在 Sketch 中创建了一个垂直alpha蒙版，顶部为0％#000000，底部为100％#000000，然后将其导出为SVG并使用filter route的指导进行调整。它现在看起来像这样：

<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');

但是，当然，这不起作用。任何人都可以帮我解决这个问题吗？或者这甚至可能吗？如果没有，有人可以推荐一种方法来实现这个目标吗？

提前致谢！

更新：我正在做的this O' Reilly article ......

Answer 1

你的例子中有很多错误和误解（为什么你认为displaMap对你有帮助？）

为什么不从下面的代码开始 - 使用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>

Answer 2

几句话： 1）SVG（和CSS）opacity value不是感知范围，而是0.0 - 1.0范围。

2）提到的mask属性似乎只是在Webkit中加上前缀而在Gecko中没有前缀。

3）如果您的目标环境是HTML + CSS，您可能不一定需要SVG：使用线性渐变和RGBA可以获得类似的效果 background-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 50%);在某些叠加（伪）元素上。 pointer-events: none;可能会有用。

创建线性渐变SVG滤镜

2 个答案: