如何在SVG对象中填充多个背景?

时间:2013-08-16 14:27:39

标签: html css3 svg

我需要将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对象(图像+渐变)

2 个答案:

答案 0 :(得分:0)

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

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

答案 1 :(得分:0)

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