How to give svg two fill parameters?

Question

css

There is a pentagon (id="fdsa"), you need to make a pattern (id="pat") on its background and at the same time fill the pentagon with the color #414b5f
Now there is a pattern in the fill parameter and do it like in css background (for example background: url( "img.svg") #ffffff) does not come out
How can I insert a pattern and fill in the color near the pentagon (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>

Answer 1

This will not work, you need to modify the pattern itself to the desired state, and not the element to which it is applied.