Как задать для svg два параметра fill?

Question

[Jawell]

Имеется пятиугольник (id="fdsa"), у него на бэкграунд нужно сделать pattern (id="pat") и при этом залить пятиугольник цветом #414b5f
Сейчас в параметре fill стоит паттерн и сделать как в css background (например background: url("img.svg") #ffffff) не выходит

Как можно и вставить паттерн и залить цвет у пятиугольника (id="fdsa")?

<svg id="asdf" width="320px" height="315px" viewBox="0 0 5 5" xmlns="http://www.w3.org/2000/svg">
<defs>
	<pattern id="pat" patternUnits="userSpaceOnUse" viewBox="1 0 4 10" width="0.90" height="1.5px">
		<polygon points="2,0 -0.3,1" style="fill:#414b5f;stroke:#555e70;stroke-width:0.2"></polygon>
		<polygon points="4,0 6.3,1" style="fill:#414b5f;stroke:#555e70;stroke-width:0.2"></polygon>
		<polygon points="2,10 -0.3,9" style="fill:#414b5f;stroke:#555e70;stroke-width:0.2"></polygon>
		<polygon points="4,10 6.3,9" style="fill:#414b5f;stroke:#555e70;stroke-width:0.2"></polygon>
		<polygon points="2.5,1 0.5,2 0.5,4 2.5,3" style="fill:#414b5f;stroke:#555e70;stroke-width:0.2"></polygon>
		<polygon points="3.5,1 3.5,3 5.5,4 5.5,2" style="fill:#414b5f;stroke:#555e70;stroke-width:0.2"></polygon>
		<polygon points="3,4 1,5 3,6 5,5" style="fill:#414b5f;stroke:#555e70;stroke-width:0.2"></polygon>
		<polygon points="0.5,6 0.5,8 2.5,9 2.5,7" style="fill:#414b5f;stroke:#555e70;stroke-width:0.2"></polygon>
		<polygon points="3.5,7 3.5,9 5.5,8 5.5,6" style="fill:#414b5f;stroke:#555e70;stroke-width:0.2"></polygon>
	</pattern>
</defs>
<polygon id="fdsa" points="1,0.01 0,3 2.5,5 5,3 4,0.01" fill="url(#pat)" stroke="#434d61" stroke-width="0.02"></polygon>
</svg>

Comments

[Jawell]

Спасибо, Максим Тимофеев, в pattern, перед всеми полигонами, добавил image с нужным цветом

Answer 1

[Максим Тимофеев]

Так не получится, Вам надо сам pattern доработать до нужного состояния, а не элемент к которому он применяется.