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对齐

回答

相关问题