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. Its a maintenance overhead.

The below image is a sample of my expected output.

<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%'>
<defs>
    <pattern id='tile' patternUnits='userSpaceOnUse' width='75' height='75' viewBox='0 0 50 50'>
        <line x1='1' y1='0' x2='51' y2='50' stroke='#19203d' stroke-width='2'/>
        <line x1='49' y1='0' x2='-1' y2='50' stroke='#19203d' stroke-width='2'/>
        <line x1='50' y1='0' x2='0' y2='50' stroke='#313763' stroke-width='2'/>
        <line x1='0' y1='0' x2='50' y2='50' stroke='#313763' stroke-width='2'/>
    </pattern>
    <radialGradient id='l' cx='50%' cy='200%' fy='0' r='201%'>
        <stop offset='0%' style='stop-color:#fff; stop-opacity:.1;' />
        <stop offset='10%' style='stop-color:#000; stop-opacity:0.1;' />
        <stop offset='30%' style='stop-color:#000; stop-opacity:0.3;' />
        <stop offset='90%' style='stop-color:#000; stop-opacity:0.55;' />
        <stop offset='100%' style='stop-color:#000; stop-opacity:.6' />
    </radialGradient>
</defs>
<rect fill='#39466b' width='100%' height='100%'/>
<rect fill='url(#tile)' width='100%' height='100%'/>
<rect width='100%' height='100%' fill='url(#l)'/></svg>

I DON'T WANT TO DUPLICATE THE ELEMENT FOR FILLING GRADIENT AND PATTERN. THE ABOVE CODE HAS DUPLICATION OF THE ELEMENT.

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;
}

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

<rect filter='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.