JSFiddle - React, Tailwind, and code Playground

HTML

<svg transform="scale(2)" viewBox="0 0 50 50" id="s1">
    <circle cx="50%" cy="50%" r="25%" fill="blue" />
</svg>
<svg style="transform:scale(2)" viewBox="0 0 50 50" id="s2">
    <circle cx="10" cy="10" r="10" fill="fuchsia" />
</svg>

CSS

svg {
    width: 200px;
    height: 200px;
    border: 1px solid black;
    opacity: 0.1;
}

JavaScript

function check(elm) {
    var result = "";
    try {
        var m = elm.getCTM();
        result = "[" + m.a + ", " + m.b + ", " + m.c + ", " + m.d + ", " + m.e + ", " + m.f + "]";
    } catch (e) {
        result = "failed (" + e + ")";
    }
    document.body.innerHTML += "<p>getCTM: " + result + "</p>";

    try {
        var m = elm.getScreenCTM();
        result = "[" + m.a + ", " + m.b + ", " + m.c + ", " + m.d + ", " + m.e + ", " + m.f + "]";
    } catch (e) {
        result = "failed (" + e + ")";
    }
    document.body.innerHTML += "<p>getScreenCTM: " + result + "</p>";
}

check(document.getElementById('s1'));
check(document.getElementById('s2'));