居中 SVG 图表宽度 jQuery

Question

我正在尝试将SVG图表居中。目前它的html看起来像这样：

<div class="svgWrapper">
    <svg>Generated svg chart</svg>
</div>

我无法指定 SVG 的宽度和高度，因为它在响应式设计中。我无法使用jQuery获取SVG宽度或高度

$('svg').width();

返回包装器div 的宽度，但 SVG 宽度不等于包装器宽度。

<div class="svgWrapper">
   <div style="float: left;">
       <svg>...</svg>
   </div>
</div>

知道如何在包装器div 中垂直和水平地将生成的 SVG 图表居中，并更改 SVG 和包装器的 w/h（包装器高度始终保持不变）？

Answer 1

将canvas元素包装在div内并分配display: table-cell;，然后使用vertical-align: middle;和text-align: center;垂直和水平对齐

演示

div {
    display: table-cell;
    height: 300px;
    width: 300px;
    vertical-align: middle;
    text-align: center;
    border: 1px solid #eee;
}
canvas {
    height: 30px;
    width: 30px;
    border: 4px solid #f00;
}

---

不想使用display: table-cell;？您还可以使用CSS定位来实现这一点。在这里，我将position: relative;分配给容器元素，而不是使子元素position: absolute;，只需确保在那里使用margin: auto;，因为它至关重要。

演示 2

div {
    position: relative;
    height: 300px;
    width: 300px;
    border: 1px solid #eee;
}
canvas {
    height: 30px;
    width: 30px;
    border: 4px solid #f00;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
    bottom: 0;
}

注意：我知道canvas的height和width是 动态，但我只是使用固定用于演示目的。