“矢量效果”设置为非缩放笔划但在父div中缩放

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。 我希望将矩形的笔触宽度保持为2的固定大小，即使父div也是缩放的。我可以帮忙吗？