我一直在處理來自 FrontEnd Mentor的Order Summary Component挑戰，但對動態調整<svg/>元素大小有點困惑。只是想確保我做的事情正確，因為我對 CSS 不太了解。
我的問題如下：
- 我將背景圖案作為卡片組件的兄弟，將容器設定為
position: relative，將.backgrounddiv 設定為position: absolute; inset: 0;。這是在卡片后面浮動背景影像的正確方法嗎？或者我應該以不同的方式處理它？ - 我將 svg 設定
viewbox為匹配提供的widthandheight元素并洗掉widthandheight(fromwidth="450" height="220"toviewbox="0 0 450 220)。然后，當視口水平調整大小時，我將.backgrounddiv設定為overflow: hidden;剪輯模式。這樣對嗎？或者我應該嘗試動態調整 svg 的大小，以便模式除了高度之外還隨容器寬度縮放？ - 當我放大卡片時
1px，svg元素和卡片之間會出現間隙。這是為什么？我添加了一個實心邊框來查看卡片的盒子模型發生了什么。我應該使用 viewbox 屬性使 svg 稍微大一點嗎？我在這兒劈頭發嗎？這還重要嗎？它在 100% 縮放時看起來不錯，但以 110%、125%、150%、175% 顯示，然后在 200% 時再次消失。
代碼沙盒鏈接
提前致謝！
uj5u.com熱心網友回復：
我認為你在那里做得很好，祝賀你。
對于1.，我的 2 美分是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;樣式。
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/312334.html
上一篇：如何在svg路徑中??添加文本？