svg - Svg viewbox 和 preserveAspectRatio 没有像预期的那样做

Question

我正在我的 Firefox 和 chome 中查看以下 svg http://pastebin.com/pNdNEQ6z。

有人能告诉我为什么这两个图在 y 中间的某个地方而不是从顶部开始吗？如果您将视图框更改为“0 200 650 800”，一切都很好。为什么是200？我玩过 preserveAspectRatio="xMidYMin" 但这并没有做任何事情。

在一天结束时，我想从顶部开始显示两个完全可见的图表？而且我想了解为什么它现在不这样做:-)

Answer 1

您的问题是您在第一个嵌入<svg>元素上有错字（您有hight="400"而不是height="400"）并且没有…YMin在外部使用对齐方式。

固定，它看起来像这样：

<svg … preserveAspectRatio="xMidYMin">
  <svg … height="400">

演示：http: //jsfiddle.net/WAVZj/