集裝箱

-1

中心大SVG我想在一個容器div來中心的大SVG同時最大化SVG的大小並保持縱橫比。集裝箱

由於某些原因，svg顯示正確，但寬度和高度屬性不正確，就好像svg展開爲整個父級一樣。

我該如何做到這一點，所以svg具有合適的尺寸？

請，這應該是僅適用於CSS，JavaScript的沒有解決。

此外，請注意，如果我用一個大圖像替換svg，這個工作。

var info = document.getElementById('info'); 
 
var svg = document.getElementById('svg'); 
 
var box = svg.getBoundingClientRect(); 
 

 
info.textContent = 'the ratio is ' + (box.width/box.height) + ' instead of 2.5! The yellow square is not in the viewBox, so why does it show up?';

.container { 
 
    position: absolute; 
 
    top: 40px; 
 
    left: 40px; 
 
    right: 40px; 
 
    bottom: 40px; 
 
} 
 

 
.svg { 
 
    position: absolute; 
 
    max-height: 100%; 
 
    max-width: 100%; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
    background-color: gray; 
 
}

<div class="container"> 
 
<svg id="svg" class="svg" width="1000px" height="500px" viewBox="0 0 10 5"> 
 
    <rect width="10" height="5" fill="black" /> 
 
    <rect x="-2" y="2" width="1" height="1" fill="yellow" /> 
 
</svg> 
 
</div> 
 
<div id="info"/>

來源

2017-09-15 d--b

https://css-tricks.com/scale-svg/ – CBroe

我相信你想達到爲'背景大小相同的效果：cover'。如果你不支持舊的瀏覽器，只有不斷綠色的計劃，你可以試試['對象的配合：cover'（https://developer.mozilla.org/en-US/docs/Web/CSS /對象配合）。 – Terry

@Terry：不，我正在嘗試做對象擬合：包含。不知道這些東西應該如何工作。只要我刪除最大寬度或最大高度，svg就會變得太大 –

從某種意義上說，你已經SVG是配件在其容器，你希望它的方式。實際上，您定義的大多數CSS都可以保留。 SVG元素應該使用width: 100%, height: 100%來定義，因此<svg>元素本身的大小與其容器相同。然後，由viewBox所限定的區域被根據屬性preserveAspectRatio="xMidYMid meet"渲染到這個視。（隱式使用，這是它的默認值）：保留縱橫比，放在裏面的最大尺寸，位於中間。

與黃色矩形問題就出現了，只是因爲內容是在視，而不是視框的邊緣裁剪。因此，在SVG中定義的內容，但在viewBox外部仍可見。

（有最初是爲了支持<svg>元素上的clip樣式屬性的想法，但它的概念是如此令人費解的即是不可用的，現在已經過時了。）

最好的解決辦法，現在是將<svg>元素與另一個<svg>包裝在一起。內層獲取寬度和高度的絕對值，外層獲取與viewBox和width: 100%, height: 100%相同的值。如你所見，內部svg在其邊緣剪輯內容，而外部svg將內容嵌入到容器中。

請注意，您無法在內部svg上定義CSS background-color。這僅僅是爲HTML定義的，僅在外部工作，因爲它是HTML元素的直接子元素。如果您想要彩色背景，請使用適當的fill定義覆蓋viewBox區域的矩形。

.container { 
 
    position: absolute; 
 
    top: 40px; 
 
    left: 40px; 
 
    right: 40px; 
 
    bottom: 40px; 
 
} 
 

 
#svg1 { 
 
    height: 100%; 
 
    width: 100%; 
 
    background-color: gray; /* clipped at the borders of the container! */ 
 
}

<div class="container"> 
 
    <svg id="svg1" class="svg" viewBox="0 0 10 5"> 
 
    <svg id="svg2" width="10" height="5"> 
 
     <rect width="10" height="5" fill="black" /> <!--this is your background--> 
 
     <rect x="-2" y="2" width="1" height="1" fill="yellow" /> 
 
     <ellipse cx="5" cy="2.5" rx="6" ry="3" 
 
       fill="none" stroke="blue" stroke-width="0.2" /> 
 
    </svg> 
 
    </svg> 
 
</div> 
 
<div id="info"/>

來源

2017-09-15 22:19:05 ccprog

回答

相關問題