I have defined two patterns which I overlay using two rectangles that lie one on top of the other. One of the two patterns uses a a pattern transformation to translate its location. Using w3school tryit editor https://www.w3schools.com/graphics/tryit.asp?filename=trysvg_pattern1 and substituting the code below, the patterns appear as I expect, but when I try to add defs to an inkscape document with the same patterns, and apply the patterns to two rectangles in Inkscape, the translation does not appear to work correctly. I have read that there are some differences with how patternTransform works in browsers vs Inkscape but have been unsuccessful at finding a workaround. FYI: I have tried moving the transform to the path element, but that too, doesn't work as expected. Any suggestions?
<!DOCTYPE html>
<html>
<body>
<h2>SVG pattern Element</h2>
<svg width="300mm" height="300mm" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
<defs>
<pattern id="spiral1" x="1" y="1" width="75" height="75" patternUnits="userSpaceOnUse">
<path
d="m 15 45 v 15 h -15 v -30 h 60 v -30 h -15 v 15 m 0 30 h 15 v 15 h -30 v -60 h -30 v 15 h 15"
style="fill:none;" stroke="#7fffd4" />
</pattern>
<pattern id="spiral2" x="1" y="1" width="75" height="75" patternUnits="userSpaceOnUse" patternTransform="translate(-37.5, -37.5)">
<path
d="m 15 45 v 15 h -15 v -30 h 60 v -30 h -15 v 15 m 0 30 h 15 v 15 h -30 v -60 h -30 v 15 h 15"
style="fill:none;" stroke="#00ffff" />
</pattern>
</defs>
<rect width="300" height="300" x="0" y="0" stroke="black" fill="url(#spiral1)" />
<rect width="300" height="300" x="0" y="0" stroke="black" fill="url(#spiral2)" />
</svg>
</body>
</html>