如何重新调整svg元素

Question

我从D3.js开始并创建一个非常基本的数字。问题是关于<svg>标签的宽度。当用户更改窗口大小时，如何调整svg宽度？这是关于制作响应式svg ......

我感到不满并且svg的视口分隔了绘制de数字的区域，但是当我分配给viewport="0 0 100% 100%"时它不会像我那样工作。

我有以下代码：

HTML

<div id="main">
    <h3>Graph title</h3>
    <div class="graph">
        <svg xmlns="http://www.w3.org/2000/svg" version="1.1"></svg>
    </div>
</div>

CSS

body, h3 {
    position: relative;
    margin:0px; 
    padding:0px;
}

#main {
    position: relative; 
    width: 80%;
    border: 1px solid #000;
    border-radius: 4px;
    margin: 0 auto;
    padding: 10px;
}

.graph{position: relative;}

svg {
    position: relative;
    width: 100%;
}

我认为是关于css的......在这里你有jsfiddle示例和一些数据。