中心 SVG 图表宽度 jQuery答案

【问题标题】：Center SVG chart width jQuery中心 SVG 图表宽度 jQuery
【发布时间】：2014-01-15 20:35:02
【问题描述】：

我正在尝试将 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>

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

【问题讨论】：

标签： jquery html css svg positioning

【解决方案1】：

将canvas 元素包裹在div 中并指定display: table-cell;，然后使用vertical-align: middle; 和text-align: center; 来对齐垂直和水平 em>

Demo

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;，因为它很重要。

Demo 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 是动态的，但我只是将固定用于演示目的。

【讨论】：