我有这个chart，我试图做出回应。
原始尺寸为width: 800px和height: 400px
我正在尝试使其响应并依赖于父div的大小
- 首先，当我将width和height更改为100％时，图表大小实际上会缩小到全宽，但只有156px的高度。
- 其次，当我向svg元素添加属性viewBox= 0 0 100 100时，它会完全干扰不同元素的大小，只能看到/绘制YAxis标签。
有关如何修改此内容的任何想法，使其依赖于父div的大小？
答案 0 :(得分：0)
视图框定义了SVG元素/路径等中使用的值的坐标系统....不清楚究竟应该是什么，而是基于实际使用的数字SVG我估计......
viewBox= "0 0 1700 400"
然后SVG适当缩放。
.chart {
border: 1px solid #ccc;
}
.wrapper {
width: 80%;
margin:1em auto;
}<div class="wrapper">
<svg class="chart" xmlns="http://www.w3.org/2000/svg" style="background-color: rgb(42, 52, 63);" viewBox="0 0 1700 400">
<g id="xGrid" class="grid x-grid" style="stroke: white; stroke-dasharray: 1px, 2px; stroke-width: 1px;">
<line x1="113" x2="113" y1="10" y2="310.5"></line>
<line x1="329" x2="329" y1="10" y2="310.5"></line>
<line x1="545" x2="545" y1="10" y2="310.5"></line>
<line x1="761" x2="761" y1="10" y2="310.5"></line>
<line x1="977" x2="977" y1="10" y2="310.5"></line>
<line x1="1193" x2="1193" y1="10" y2="310.5"></line>
<line x1="1409" x2="1409" y1="10" y2="310.5"></line>
<line x1="1625" x2="1625" y1="10" y2="310.5"></line>
</g>
<g id="yGrid" class="grid y-grid" style="stroke: white; stroke-dasharray: 1px, 2px; stroke-width: 1px;">
<line x1="86" x2="1625" y1="10" y2="10"></line>
<line x1="86" x2="1625" y1="56.75" y2="56.75"></line>
<line x1="86" x2="1625" y1="103.5" y2="103.5"></line>
<line x1="86" x2="1625" y1="150.25" y2="150.25"></line>
<line x1="86" x2="1625" y1="197" y2="197"></line>
<line x1="86" x2="1625" y1="243.75" y2="243.75"></line>
<line x1="86" x2="1625" y1="290.5" y2="290.5"></line>
</g>
<g style="font-family: Arial; font-size: 14px; text-anchor: middle; fill: orange;">
<text x="113" y="330.5">2008</text>
<text x="329" y="330.5">2009</text>
<text x="545" y="330.5">2010</text>
<text x="761" y="330.5">2011</text>
<text x="977" y="330.5">2012</text>
<text x="1193" y="330.5">2013</text>
<text x="1409" y="330.5">2014</text>
<text x="1625" y="330.5">2015</text>
<text x="869" y="370.5">Years</text>
</g>
<g style="font-family: Arial; font-size: 14px; text-anchor: end; fill: orange;">
<text x="80" y="15">15</text>
<text x="80" y="108.5">10</text>
<text x="80" y="202">5</text>
<text x="80" y="295.5">0</text>
<text x="56.5" y="15">Weeks</text>
</g>
<g transform="translate(113,28.699999999999996)" style="fill-opacity: 0.5;">
<path d="M 0 127.16 L 216 110.33 L 432 117.81 L 648 134.64 L 864 136.51 L 1080 114.07 L 1296 56.1 L 1512 0" stroke="#00554d" fill="none" stroke-width="2"></path>
<g style="stroke: white; stroke-width: 3px; fill: rgb(0, 85, 77);">
<circle cx="0" cy="127.16" r="5"></circle>
<circle cx="216" cy="110.33000000000001" r="5"></circle>
<circle cx="432" cy="117.81" r="5"></circle>
<circle cx="648" cy="134.64000000000001" r="5"></circle>
<circle cx="864" cy="136.51" r="5"></circle>
<circle cx="1080" cy="114.07" r="5"></circle>
<circle cx="1296" cy="56.099999999999994" r="5"></circle>
<circle cx="1512" cy="0" r="5"></circle>
</g>
<path d="M 0 28.05 L 216 168.3 L 432 74.8 L 648 50.49 L 864 80.41 L 1080 134.64 L 1296 95.37 L 1512 50.49" stroke="#6aab19" fill="none" stroke-width="2"></path>
<g style="stroke: white; stroke-width: 3px; fill: rgb(106, 171, 25);">
<circle cx="0" cy="28.05000000000001" r="5"></circle>
<circle cx="216" cy="168.3" r="5"></circle>
<circle cx="432" cy="74.80000000000001" r="5"></circle>
<circle cx="648" cy="50.49000000000001" r="5"></circle>
<circle cx="864" cy="80.41" r="5"></circle>
<circle cx="1080" cy="134.64000000000001" r="5"></circle>
<circle cx="1296" cy="95.37" r="5"></circle>
<circle cx="1512" cy="50.49000000000001" r="5"></circle>
</g>
<path d="M 0 191.675 L 216 142.681 L 432 224.4 L 648 177.65 L 864 112.2 L 1080 154.275 L 1296 149.6 L 1512 93.5" stroke="#c12627" fill="none" stroke-width="2"></path>
<g style="stroke: white; stroke-width: 3px; fill: rgb(193, 38, 39);">
<circle cx="0" cy="191.675" r="5"></circle>
<circle cx="216" cy="142.68099999999998" r="5"></circle>
<circle cx="432" cy="224.4" r="5"></circle>
<circle cx="648" cy="177.65" r="5"></circle>
<circle cx="864" cy="112.20000000000002" r="5"></circle>
<circle cx="1080" cy="154.275" r="5"></circle>
<circle cx="1296" cy="149.6" r="5"></circle>
<circle cx="1512" cy="93.5" r="5"></circle>
</g>
<path d="M 0 74.8 L 216 121.55 L 432 168.3 L 648 121.55 L 864 215.05 L 1080 171.105 L 1296 168.3 L 1512 121.55" stroke="#7eadd5" fill="none" stroke-width="2"></path>
<g style="stroke: white; stroke-width: 3px; fill: rgb(126, 173, 213);">
<circle cx="0" cy="74.80000000000001" r="5"></circle>
<circle cx="216" cy="121.55000000000001" r="5"></circle>
<circle cx="432" cy="168.3" r="5"></circle>
<circle cx="648" cy="121.55000000000001" r="5"></circle>
<circle cx="864" cy="215.05" r="5"></circle>
<circle cx="1080" cy="171.10500000000002" r="5"></circle>
<circle cx="1296" cy="168.3" r="5"></circle>
<circle cx="1512" cy="121.55000000000001" r="5"></circle>
</g>
</g>
<use xlink:href="#xGrid" style="stroke: white; stroke-dasharray: 1px, 2px; stroke-width: 1px; stroke-opacity: 0.4;"></use>
<use xlink:href="#yGrid" style="stroke: white; stroke-dasharray: 1px, 2px; stroke-width: 1px; stroke-opacity: 0.4;"></use>
</svg>
</div>