将SVG元素集中到其所在区域

Question

请看this fiddle。

代码很复杂，但问题很简单。我只想将量表的SVG内容集中在一起。您可以看到红色区域，即 SVG区域。我希望内容（图形）适合它的中心。不介意它是否作物，我可以稍后调整。

我尝试使用CSS margin和padding但没有效果。剑道没有办法让它居中。

Answer 1

显然您需要将margin添加到gaugeArea：

margin: { top: -margin, left: margin/2, right: -margin/2, bottom: margin/2 },

http://jsfiddle.net/VZAa7/

请注意为什么最高保证金必须加倍...

Answer 2

您需要设置svg viewBox以保留中间的宽高比：

例如：

<svg 
  ...
  preserveAspectRatio="xMidYMid"
  viewBox="0 0 370 430"
  ...
></svg>

这意味着svg的内容将从中间扩展，而不是从左边或右边扩展。

可在此处找到更多信息：http://tutorials.jenkov.com/svg/svg-viewport-view-box.html

此外，为了确保所有内容都正确缩放，您可以将以下CSS应用于您的svg：

.responsive-svg {
  width: 100%;
  max-width: 100%; 
  height:auto;
}

Answer 3

http://jsfiddle.net/gWyhE/1/

在我给你的小提琴中，我在元素padding-bottom中添加了padding-left和.gauge-container svg。

希望我帮助过。