爲什麼SVG保持AspectRatio屬性奇怪地工作？

Question

我創建了一個簡單的例子https://jsfiddle.net/7mupweLe/

<svg style="background:yellow" 
    height="200" width="200" viewBox="0 0 100 200" 
    preserveAspectRatio="xMidYMid meet"> 
    <rect class="rect" x="0" y="0" width="200" height="200" /> 
</svg> 

爲什麼是黑色矩形向右偏移這種情況。據我瞭解，它必須在中間，因爲我有xMidYMid。

Answer 1

我們已經面積200×200像素（在<svg>元素的寬度和高度），其中我們要顯示的東西，就是100×200（視框）

preserveAspectRatio的滿足說確保我們顯示所有內容並且在側面或頂部（在這種情況下是側面）都有空間。 xMidYMid意味着創造空間。

因此，對於viewBox的左側和右側，我們將看到背景，但SVG包含一個形狀 - 比viewBox 200 x 200更大的矩形，與viewBox的100 x 200相比，因此它溢出視圖框在右側。

如果我們使rect與viewBox具有相同的大小，那麼一切都是對稱的。

<svg style="background:yellow" 
 
    height="200" width="200" viewBox="0 0 100 200" 
 
    preserveAspectRatio="xMidYMid meet"> 
 
    <rect class="rect" width="100" height="200" /> 
 
</svg>