JSFiddle - React, Tailwind, and code Playground

HTML

<svg>
    <rect x=100 y=100 width=100 height=100 transform="rotate(45, 150, 150)" fill=red />
    <rect x=100 y=100 width=100 height=100 style="transform-origin: 50% 50%; transform:rotate(45deg)"/>
    <circle cx=149 cy=149 r=3 fill=blue />
</svg>

CSS

svg,body,html { height: 100%; width: 100%; margin:0; padding:0; }
svg { display: block; }

JavaScript

// Tests transform-origin inside svg content.
//
// Expected result:
// the black diamond shape should cover the red diamond shape.
//
// if any red shows up then it's this test has failed.