动态调整 SVG 元素大小的最佳实践是什么？

Question

我一直在处理来自 FrontEnd Mentor 的 Order Summary Component 挑战，对动态调整 <svg/> 元素的大小感到有点困惑。只是想确保我做事正确，因为我对 CSS 了解不多。

我的问题如下：

1. 我将背景图案作为卡片的同级放置 组件，将容器设置为position: relative 和 .background div 到 position: absolute; inset: 0;。这是在卡片后面浮动背景图像的正确方法吗？或者应该 我会以不同的方式处理它吗？
2. 我将 svg viewbox 设置为匹配提供的 width 和 height 元素并删除了width 和height（从width="450" height="220" 到viewbox="0 0 450 220）。然后我设置 .background div 到 overflow: hidden; 在水平调整视口大小时剪辑图案。它是否正确？或者我应该是 尝试动态调整 svg 的大小，以便图案随 除了高度之外的容器宽度？
3. 当我放大卡片时，svg 元素和卡片之间出现了1px 间隙。这是为什么？ 我添加了一个实心边框，以查看盒子模型的情况 卡片。我应该使用 viewbox 属性使 svg 稍微大一点吗？ 我在这里劈头发吗？这还重要吗？它在 100% 缩放时看起来不错，但在 110%、125%、150%、175% 时显示，然后在 200% 时再次消失。

CodeSandbox Link

提前致谢！

Answer 1

我认为你在这方面做得很好，恭喜。

对于1.，我的2分钱是inset: 0;是top: 0; left: 0; bottom: 0; right: 0;的快捷方式，这以后有更广泛的兼容性。

2.，我觉得你很好。

最后，最后一个最难解决的问题，作为SVG的亚像素渲染进行了讨论。对于您的情况，有一个很好的折衷解决方法：设置article 的background-color: rgb(30, 31, 205); 和section.card-content 的background-color: white;。这将修复任何百分比值的缩放（或者，您可以尝试调整宽度/高度和 viewBox，并且某些缩放将被修复，但不是全部。此解决方法可以修复所有）。

编辑

要使svg 元素在其周围空间方面表现正确，请对其应用display: block; 样式。