SVG - how to achieve diagonal two-color fill

I'm trying to fill a rounded-corner rectangle, with two colours, one colour either side of a diagonal line across the corners.

I've tried adding a triangular filled polygon, but this shows through the parent rectangle transparent corners.

So I've tried using a pattern, which is almost working.

The issue is that the pattern seems to be starting at co-ords 0,0 of the entire SGV, not the shape it's filling.

Example here:

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.dev/svgjs" version="1.1" width="800" height="800">
  <defs>
    <pattern x="0" y="0" width="100" height="100" patternUnits="userSpaceOnUse" id="SvgjsPattern1008">
      <polygon points="0,0 100,100 0,100" fill="#ff00ff" stroke-width="1" patternUnits="objectBoundingBox"/>
      <polygon points="0,0 100,0 100,100" fill="#00ff00" stroke-width="1" patternUnits="objectBoundingBox"/>
    </pattern>
  </defs>
  <rect width="100" height="100" x="0" y="75" rx="20" ry="20" fill="url(&quot;#SvgjsPattern1008&quot;)"/>
</svg>

How can I get it so the pattern starts in the top-left corner of the rectangle?

Thanks in advance for any help.

Also, I'm looking for a pure SVG solution, no CSS.

Andy