svg - 设置为非缩放笔划但在父 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 缩放。即使父 div 被缩放，我也希望将矩形的笔画宽度保持为 2 的固定大小。我可以得到帮助吗？