LenovoId
@LenovoId
svg, css,js

Как в SVG наложить два fill?

Имеем некий контур, любой формы

Требуется наложить без дублирования самого контура два 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>
  • Вопрос задан
  • 126 просмотров
Решения вопроса 1
RAX7
@RAX7
Допускается ли использования двух fill в одном контуре ?

думаю нет, но можно сделать вот так
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы