Svg &引用；“矢量效应”；当设置为非缩放笔划但在父div中缩放时

我想保持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>

上面的工作很好，但我想做的是如下

<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被缩放。我能得到帮助吗？

不，你不能。在这种情况下，您可以动态更改它。