svg - non-scaling-stroke に設定されているが親 div でスケーリングされている場合の「vector-effect」

Question

親が拡大縮小されても、svgのストローク幅を維持したい。

以下のようなコードを試していました。

<svg version="1.2" baseProfile="tiny" viewBox="-100 -100 200 200">
    <rect vector-effect="non-scaling-stroke" x="-20" y="-20" width="40" height="40" rx="5" ry="5" stroke="red" stroke-width="2" fill="none"></rect>
</svg>

上記はうまく機能しますが、私がやりたいことは以下のようなものです。

<div style="-webkit-transform: scale(5,5);">
<svg version="1.2" baseProfile="tiny" viewBox="-100 -100 200 200">
    <rect vector-effect="non-scaling-stroke" x="-20" y="-20" width="40" height="40" rx="5" ry="5" stroke="red" stroke-width="2" fill="none"></rect>
</svg>
</div>

したがって、親ダイビングが 5 倍にスケーリングされると、ストロークの出力も 5 倍にスケーリングされます。親 div がスケーリングされていても、四角形のストローク幅を 2 ​​の固定サイズに維持したいと考えています。助けてもらえますか？