SVG未能大小適當的絕對定位的父

Question

我遇到了一個問題，一個內聯<svg>元素並不延伸到其原始尺寸，在其viewBox屬性聲明，當它被包裹在一個絕對定位的父：

• 使用width: 100%似乎只會強制SVG延伸到瀏覽器定義的默認大小300px。這也會導致<img>未按其原始尺寸調整大小。
• 使用width: auto使SVG由0像素完全摺疊成0像素的尺寸，但<img>現在尺寸以它的天然尺寸

有趣的是，這種行爲可以通過使用SVG作爲data:image/svg+xml爲被複制src屬性的<img>元素，所以看起來SVG不會將其原始尺寸「傳遞」到其包含的父元素（可能是<svg>或<img>元素）。

所以，我的問題是，如果在CSS中有任何可靠的方法可以強制SVG根據其視圖屬性來調整其原始大小。我大概可以用JS來強制我的方式，通過閱讀viewBox屬性和use the fixed aspect ratio hack將我的SVG作爲背景圖像以固定寬高比<div>元素顯示，但我盡力避免這種情況。我可能誤解了瀏覽器的SVG規範的實現，但我似乎無法找到解決方法。

---

我的問題可以在下面的代碼片段中重現。您可以：使用頁面

頂部複選框

• 開啓/關閉絕對父定位在<img>或<svg>元素選擇width聲明（自動或100％）

// The JS logic below is only used to dynamically set styles based on checkbox/select changes, has nothing to do with SVG layout 
 

 
// Change positioning strategy 
 
document.getElementById('absPosToggle').addEventListener('change', function() { 
 
    var parents = document.querySelectorAll('.parent'); 
 
    
 
    if (this.checked) { 
 
    for (var i = 0; i < parents.length; i++) { 
 
     parents[i].classList.remove('no-absolute-positioning'); 
 
    } 
 
    } else { 
 
    for (var i = 0; i < parents.length; i++) { 
 
     parents[i].classList.add('no-absolute-positioning'); 
 
    } 
 
    } 
 
}); 
 

 
// Change width declaration of <svg>/<img> elements 
 
document.getElementById('widthSetting').addEventListener('change', function() { 
 
    var images = document.querySelectorAll('img, svg'); 
 
    var value = this.options[this.selectedIndex].value; 
 
    
 
    if (value === '100%') { 
 
    for (var i = 0; i < images.length; i++) { 
 
     images[i].classList.add('width--100'); 
 
    } 
 
    } else { 
 
    for (var i = 0; i < images.length; i++) { 
 
     images[i].classList.remove('width--100'); 
 
    } 
 
    } 
 
});

body { 
 
    margin: 0; 
 
    padding: 50px 0 0 0; 
 
} 
 

 
form { 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    display: block; 
 
    background-color: #fff; 
 
    z-index: 1; 
 
    padding: 5px; 
 
} 
 

 
.wrapper { 
 
    width: 100%; 
 
    height: 250px; 
 
    background-color: #eee; 
 
    margin-bottom: 10px; 
 
    position: relative; 
 
    text-align: center; 
 
} 
 

 
.parent { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
} 
 

 
.parent.no-absolute-positioning { 
 
    position: relative; 
 
    top: 0; 
 
    left: 0; 
 
    transform: none; 
 
} 
 

 
img, 
 
svg { 
 
    display: block; 
 
    width: auto; 
 
} 
 

 
img.width--100, 
 
svg.width--100 { 
 
    width: 100%; 
 
}

<form> 
 
    <label><input type="checkbox" id="absPosToggle" checked />Toggle absolute positioning</label><br /> 
 
    <label for="widthSetting">Set svg/img widths to:</label><select id="widthSetting"> 
 
    <option value="auto">Auto</option> 
 
    <option value="100%">100%</option> 
 
    </select> 
 
</form> 
 

 
<!-- <img> --> 
 
<div class="wrapper"> 
 
    <div class="parent"> 
 
    <img src="https://via.placeholder.com/500x150/173755/ffffff" /> 
 
    </div> 
 
    <span>This is an <code>&lt;img&gt;</code> element</span> 
 
</div> 
 

 
<!-- Inline <svg> --> 
 
<div class="wrapper"> 
 
    <div class="parent"> 
 
    <svg viewBox="0 0 500 150" xmlns="http://www.w3.org/2000/svg"><rect x="0" y="0" width="500" height="150" fill="#b13131" /><g transform="translate(250, 75)"><text fill="#ffffff" style="text-anchor: middle; font-size: 50; font-family: Arial;" dy="0.35em">500 x 150</text></g></svg> 
 
    </div> 
 
    <span>This is an inline <code>&lt;svg&gt;</code> element</span> 
 
</div> 
 

 
<!-- <img> with SVG as data:image --> 
 
<div class="wrapper"> 
 
    <div class="parent"> 
 
    <img src="data:image/svg+xml;charset=utf8,%3Csvg%20viewBox=%220%200%20500%20150%22%20xmlns=%22http://www.w3.org/2000/svg%22%3E%3Crect%20x=%220%22%20y=%220%22%20width=%22500%22%20height=%22150%22%20fill=%22#b13131%22%20/%3E%3Cg%20transform=%22translate(250,%2075)%22%3E%3Ctext%20fill=%22#ffffff%22%20style=%22text-anchor:%20middle;%20font-size:%2050;%20font-family:%20Arial;%22%20dy=%220.35em%22%3E500%20x%20150%3C/text%3E%3C/g%3E%3C/svg%3E" 
 
    /> 
 
    </div> 
 
    <span>This is an <code>&lt;img&gt;</code> element with SVG as data:image</span> 
 
</div>

Answer 1

我認爲這個問題的根本原因是與絕對定位你爲父母的寬度計算方法變成shrink-to-fit，並且對於那些沒有合適的內在寬度的內容，這也是一種捕捉22，這可能解釋回落到「標準」300px寬度。

我們想通了，你經歷過https://css-tricks.com/scale-svg/已經，而且好像加入width和height屬性的SVG本身可能是唯一的工作方式（在這種特殊情況），得到SVG適當的真正高度，以便它可以「跨越」其絕對定位的父母。