时间戳

首页 > 解决方案 > 动态调整 SVG 元素大小的最佳实践是什么？

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

问题描述

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

我的问题如下：

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

代码沙盒链接

提前致谢！

标签： htmlcsssvgfrontend

解决方案

我认为你在那里做得很好，恭喜。

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

对于2.，我认为你很好。

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

编辑

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

推荐阅读