Svg Pattern And Gradient Together

Is there a way to apply both pattern and gradients to an element together using filter or any method in SVG? I do not want to create a duplicate element(any shape) to achieve this.

Solution 1:

Whilst this still does duplicate elements, it does so in the defs tag meaning you can apply it one visible element.

body,
html {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

<svgxmlns='http://www.w3.org/2000/svg'width='100%'height='100%'><defs><patternid='tile'patternUnits='userSpaceOnUse'width='75'height='75'viewBox='0 0 50 50'><linex1='1'y1='0'x2='51'y2='50'stroke='#19203d'stroke-width='2'/><linex1='49'y1='0'x2='-1'y2='50'stroke='#19203d'stroke-width='2'/><linex1='50'y1='0'x2='0'y2='50'stroke='#313763'stroke-width='2'/><linex1='0'y1='0'x2='50'y2='50'stroke='#313763'stroke-width='2'/></pattern><radialGradientid='l'cx='50%'cy='200%'fy='0'r='201%'><stopoffset='0%'style='stop-color:#fff; stop-opacity:.1;' /><stopoffset='10%'style='stop-color:#000; stop-opacity:0.1;' /><stopoffset='30%'style='stop-color:#000; stop-opacity:0.3;' /><stopoffset='90%'style='stop-color:#000; stop-opacity:0.55;' /><stopoffset='100%'style='stop-color:#000; stop-opacity:.6' /></radialGradient><rectid="bgRect"fill='#39466b'width='100%'height='100%'/><rectid="gradientRect"fill='url(#l)'width='100%'height='100%'/><rectid='tileRect'fill="url(#tile)"width='100%'height='100%'/><filterid="test"color-interpolation-filters="sRGB"y="0"><feImagexlink:href="#bgRect"result="bg" /><feImagexlink:href="#tileRect"result="tile" /><feImagexlink:href="#gradientRect"result="waves" /><feMerge><feMergeNodein="bg" /><feMergeNodein="tile" /><feMergeNodein="waves" /></feMerge></filter></defs><rectfilter='url(#test)'width='100%'height='100%'/></svg>

Demo: http://codepen.io/chrisgannon/pen/acfb7fd4f64a7ceb612167929286b33c

It uses rects as the source for feImage but unfortunately this is not supported in FireFox and IE support is patchy.

It's by no means a perfect solution but it might illustrate a way forward.