創建線性漸變 SVG 過濾器

Question

本質上，我正在嘗試使用 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');

但是，當然，這是行不通的。 誰能幫我解決這個問題？ 或者這甚至可能嗎？ 如果沒有，有人可以推薦一種如何實現這一目標的方法嗎？

提前致謝！

更新：這是我正在做的事情的一個非常基本的小提琴......

Answer 1

您的示例中有很多錯誤和誤解（為什么您認為置換貼圖會幫助您？）

為什么不從下面的代碼開始 - 使用 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值不是永久范圍，而是 0.0 - 1.0 范圍。

2. 提到的mask屬性似乎只是在 Webkit 中加上前綴而在 Gecko 中沒有前綴。

3. 如果您的目標環境是 HTML + CSS，您可能不一定需要 SVG：您可以使用 linear-gradient 和 RGBA background-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 50%);獲得類似的效果background-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 50%); 在某些疊加（偽）元素上。 pointer-events: none; 那么可能會有用。