HTML 中的内联 SVG 对齐
目前，我在边界 DIV 内正确对齐内联 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 设置任何对齐方式。 text-align 和 Vertical-align 似乎都不适用于 Firefox 9、Chrome 18、IE 9 或 Opera 11.61 。我只想将内联 SVG 放置在 DIV 的左上角。
请注意，在我的例子中，周围的 DIV 具有动态尺寸（％值），因此使用绝对定位不起作用。
有人知道如何在这种情况下对齐 SVG 吗？
I currently have problems aligning inline SVG correctly inside a bounding DIV, like in this example.
<!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>
The SVG gets resized to match the the dimensions of the div, but I am not able to set any alignment for the SVG. Neither text-align nor vertical-align seem to work in Firefox 9, Chrome 18, IE 9 or Opera 11.61 . I just want to position the inline SVG at the upper left corner of the DIV.
Note that in my case the surrounding DIV has dynamic dimmension (%-values), so using absolute positioning does not work.
Anybody have any clue how to align the SVG in this case?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
添加
preserveAspectRatio="xMinYMin"作为 svg 元素上的属性，例如 http://jsfiddle.net/longsonr/ fLWhu/Add
preserveAspectRatio="xMinYMin"as an attribute on the svg element e.g. http://jsfiddle.net/longsonr/fLWhu/将
preserveAspectRatio="xMidYMid meet"属性添加到元素根据 http://tutorials.jenkov.com/svg/svg-viewport -view-box.html。
Add
preserveAspectRatio="xMidYMid meet"attribute to<svg>elementas per http://tutorials.jenkov.com/svg/svg-viewport-view-box.html.