背景關系：我想在我的博客中列出一個專案串列（作為帶有鏈接的徽標），我依賴這些專案來構建它作為確認。它們將顯示在側邊欄上。
問題：SVG 徽標具有不同的初始（默認）大小。我希望他們水平擴展保持比例。
我通過下面的代碼對此進行了模擬，其中<svg>代表帶有徽標的檔案
.column {
display: flex;
flex-direction: column;
width: 200px;
border-style: dashed;
border-width: 1px;
gap: 10px;
flex-grow: 1;
}
.logo {}<div class="column">
<div class="logo">
<svg width="50" height="50">
<rect width="100%" height="100%" fill="green" />
</svg>
</div>
<div class="logo">
<svg width="25" height="50">
<rect width="100%" height="100%" fill="red" />
</svg>
</div>
</div>我希望這flex-grow: 1;會擴展矩形，最終得到兩個相同寬度的矩形，紅色的一個是綠色的兩倍高。
是否可以flex強制調整 SVG 元素的大小？
uj5u.com熱心網友回復：
可能像下面這樣：
.column {
display: flex;
flex-direction: column;
width: 100px;
border-style: dashed;
border-width: 1px;
gap: 10px;
}
svg {
width: 100%;
height: auto;
display: block;
}<div class="column">
<div class="logo">
<svg width="50" height="50">
<rect width="100%" height="100%" fill="green" />
</svg>
</div>
<div class="logo">
<svg width="25" height="50">
<rect width="100%" height="100%" fill="red" />
</svg>
</div>
</div>uj5u.com熱心網友回復：
如果將寬度和高度屬性替換<svg>為 viewBox 屬性，SVG 將占用 100% 的可用空間。
.column {
display: flex;
flex-direction: column;
width: 200px;
border-style: dashed;
border-width: 1px;
gap: 10px;
flex-grow: 1;
}
.logo {}<div class="column">
<div class="logo">
<svg viewBox="0 0 50 50">
<rect width="100%" height="100%" fill="green" />
</svg>
</div>
<div class="logo">
<svg viewBox="0 0 25 50">
<rect width="100%" height="100%" fill="red" />
</svg>
</div>
</div>uj5u.com熱心網友回復：
您可以將 SVG 檔案作為 src 插入<img>并設定為 100% 的寬度。
.column {
display: flex;
flex-direction: column;
width: 200px;
border-style: dashed;
border-width: 1px;
gap: 10px;
flex-grow: 1;
}
.logo img {
width: 100%;
}<div class="column">
<div class="logo">
<img src="data:image/svg xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1MCIgaGVpZ2h0PSI1MCI CiAgPHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0iZ3JlZW4iIC8 Cjwvc3ZnPgo="/>
</div>
<div class="logo">
<img src="data:image/svg xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNSIgaGVpZ2h0PSI1MCI CiAgPHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0icmVkIiAvPgo8L3N2Zz4K"/>
</div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/482076.html