How to put two fills in SVG?

Question

SVG

We have a contour, of any shape. It is
required to impose two fills without duplicating the contour itself, i.e. in other words, it is necessary to put both pattern and a translucent linearGradient into fill in svg
. Is it allowed to use two fills in one contour?
Question example:

<svg viewbox="0 0 900 400">
    	<defs>
    		<pattern id="image" width="100%" height="100%" x="0" y="0">
    			<image xlink:href="images/inna.png"
    			       width="100%" 
    			       height="100%"
    			       preserveAspectRatio="none"
    			       x='0'
    			       y='0' />
    		</pattern>
    		<linearGradient id="gradient">
            <stop stop-color="rgba(255,0,0,0.5)" offset="0%"/>
            <stop stop-color="rgba(255,255,0,0.5)" offset="50%"/>
            <stop stop-color="rgba(255,0,255,0.5)" offset="100%"/>
           </linearGradient>
    		<style>
    			.header-path{
    				fill:url(#image);
    				stroke: none;
    			}
    		</style>
    	</defs>
    		<path  d="M 0,0 
    		          900,0 
    		          900,350 
    		          450,400 
    		          0,350z" 
    		          class="header-path"/>
    	</svg>

Answer 1

Is it allowed to use two fills in one circuit?

I don't think so, but you can do it like this