如何在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

任何人都可以帮我填充两个背景的svg对象（图像+渐变）

Answer 1

你快到了。您只需在<rect>之前的<pattern>添加<image>。将<rect>的填充设置为您还需要定义的linearGradient。

您还需要为图片添加opacity="0.6"。

Answer 2

只需使用标准的SVG渐变填充。所有SVG渲染引擎都必须正确识别和渲染它。无需图像后备。