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

What are the best practices when it comes to dynamically resizing SVG elements?

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

我的问题如下：

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

CodeSandbox Link

提前致谢！

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

对于 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;。这将修复任何百分比值的缩放（否则，您可以尝试调整 width/height 和 viewBox 并且一些缩放将被修复，但不是全部。此解决方法修复所有）。

编辑

要使 svg 元素在 space 周围正确运行，请对其应用 display: block; 样式。

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

What are the best practices when it comes to dynamically resizing SVG elements?

html

css

frontend

svg

编辑