Имеем некий контур, любой формы
Требуется наложить без дублирования самого контура два fill т.е другими словами надо в fill вложить и pattern и полупрозрачный linearGradient в svg
Допускается ли использования двух fill в одном контуре ?
Пример вопроса:
<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>
