css - 如何重新缩放 svg 元素

Question

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

我知道 svg 的视口划定了绘制图形的区域，但是当我分配给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示例。