HTML中的內聯SVG對齊

我目前在邊界DIV內正確對齊內聯SVG時出現問題，就像本例中一樣。HTML中的內聯SVG對齊

<!DOCTYPE html> 
<html> 
<body> 
    <div style="border: 1px solid black; height: 50px; width: 100px; vertical-align:top;"> 
     <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100""> 
      <rect x="0" y="0" width="100" height="100" style="fill: red;" /> 
     </svg> 
    </div> 
</body> 
</html>

SVG被調整大小以匹配div的尺寸，但我無法爲SVG設置任何對齊方式。在Firefox 9，Chrome 18，IE 9或Opera 11.61中，文本對齊和垂直對齊似乎都不起作用。我只想將內聯SVG放在DIV的左上角。

請注意，在我的情況下，周圍的DIV具有動態內隱（％-values），所以使用絕對定位不起作用。

任何人都有任何線索如何在這種情況下對齊SVG？

來源

2012-01-26 Sirko

爲什麼不能添加包裝？ – c69

將preserveAspectRatio="xMinYMin"作爲svg元素上的屬性添加，例如， http://jsfiddle.net/longsonr/fLWhu/

來源

2012-01-26 11:12:58

但這沒有幫助？ – c69

它顯示在左上角。嘗試繪製一張你想要的圖片，如果不是這樣。奇怪的是 –

。沒有工作。但正如jsfiddle清楚地表明的那樣 - 它的工作。 // _改變我的downvote upvote_ – c69

添加preserveAspectRatio="xMidYMid meet"屬性到<svg>元素根據http://tutorials.jenkov.com/svg/svg-viewport-view-box.html。

來源

2015-02-10 13:59:43

爲什麼要把它放在左上角，這是OP想要的？ –

HTML中的內聯SVG對齊

回答

相關問題