如何在SVG對象中填充多個背景？

Question

我需要將HTML元素轉換爲SVG對象。我幾乎做到了，除了一兩件事： 我不能在SVG定義多個背景，因爲我不知道如何將這種

background-image: linear-gradient(hsla(177, 83%, 28%, 0.5),hsla(177, 83%, 28%, 0.6)), url(http://s23.postimg.org/5osuy1fpj/diagonal_noise.png); 

轉換爲SVG對象;

這裏是一個codepen link

誰能幫我填有兩個背景（圖像+梯度）

Answer 1

一個SVG對象時，幾乎沒有。您只需在<image>之前將<rect>添加到您的<pattern>中。將<rect>的填充設置爲linearGradient，您還需要對其進行定義。

您還需要添加一個opacity="0.6"到您的圖像。

Answer 2

只需使用標準的SVG漸變填充。所有SVG渲染引擎都必須識別並正確渲染它。無需映像回退。