I have a script that generates polygons and attach them to an SVG element. When I generate the polygon I can change it's style simply like this:

part.style.strokeWidth = 2;
part.style.stroke = '#fd9f31';
part.style.fill = '#fd9f31';

However if I try to use a pattern as fill it won't work

part.style.fill = 'url(#diagonalHatch)'

Also I noticed that in the outerHTML of the object it appears like

<polygon style="stroke-width: 2; stroke: rgb(253, 159, 49); fill: url(&quot;#diagonalHatch&quot;);" points="9.21 -11.75 ...etc

I think the problem is with those 2 &quot ; any idea on how to escape them? I tried also to change it by using setAttribute and setAttributeNS but it doesn't seem to work. I also tried to use regex to modify the outerHTML but after putting it back it's again the same as before.

Thanks for helping :)