-2

看看这个小提琴。

代码很复杂，但问题很简单。我只想将仪表图的 SVG 内容居中。您可以看到红色方块，即SVG 区域。我希望内容（图形）适合其中心。不要介意它是否裁剪，我可以稍后调整它。

我尝试使用 CSS margin，padding但没有成功。而剑道也没有办法让它居中。

4

3 回答 3

2

显然你需要添加margin到你的gaugeArea：

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

http://jsfiddle.net/VZAa7/

请注意为什么上边距必须是两倍...

于 2013-06-17T20:08:29.867 回答
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;
}
于 2015-08-11T01:30:30.663 回答
1

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

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

希望我有所帮助。

于 2013-06-17T19:39:25.380 回答