我在HTML页面中用svg对象制作了一个图表，我想给出与屏幕相同的高度。我认为我可以通过将样式设置为 height：100% 来做到这一点，这不起作用。我在Chrome，IE11或更低版本中对其进行了测试。
我阅读了很多关于这个主题的文章，但找不到一种真正有效并给出与屏幕高度相同的高度的方法。
那么，如何使SVG对象与屏幕一样大呢？
这是一个 jsfiddle，我将样式设置为 100% 高度https://jsfiddle.net/gz3ywdcm/
这是我的HTML代码：
<svg xmlns="http://www.w3.org/2000/svg" style="margin: 2%; border: 1px solid black; border-image: none; width: 90%; height: 100%;">
<circle fill="#1da856" cx="0%" cy="100%" r="3" /><circle fill="#1da856" cx="0%" cy="100%" r="3" /><line style="stroke: #1da856; stroke-width: 2;" x1="0%" y1="100%" x2="0%" y2="100%" /><circle fill="#1da856" cx="0%" cy="100%" r="3" /><line style="stroke: #1da856; stroke-width: 2;" x1="0%" y1="100%" x2="0%" y2="100%" /><circle fill="#1da856" cx="0%" cy="100%" r="3" /><line style="stroke: #1da856; stroke-width: 2;" x1="0%" y1="100%" x2="0%" y2="100%" /><circle fill="#1da856" cx="21.4617%" cy="95.8333%" r="3" /><line style="stroke: #1da856; stroke-width: 2;" x1="21.4617%" y1="95.8333%" x2="0%" y2="100%" /><circle fill="#1da856" cx="21.4617%" cy="95.8333%" r="3" /><line style="stroke: #1da856; stroke-width: 2;" x1="21.4617%" y1="95.8333%" x2="21.4617%" y2="95.8333%" /><circle fill="#1da856" cx="21.4617%" cy="95.8333%" r="3" /><line style="stroke: #1da856; stroke-width: 2;" x1="21.4617%" y1="95.8333%" x2="21.4617%" y2="95.8333%" /><circle fill="#1da856" cx="21.4617%" cy="91.6667%" r="3" /><line style="stroke: #1da856; stroke-width: 2;" x1="21.4617%" y1="91.6667%" x2="21.4617%" y2="95.8333%" /><circle fill="#1da856" cx="21.4617%" cy="87.5%" r="3" /><line style="stroke: #1da856; stroke-width: 2;" x1="21.4617%" y1="87.5%" x2="21.4617%" y2="91.6667%" /><circle fill="#1da856" cx="25.9281%" cy="87.5%" r="3" /><line style="stroke: #1da856; stroke-width: 2;" x1="25.9281%" y1="87.5%" x2="21.4617%" y2="87.5%" /><circle fill="#1da856" cx="25.9281%" cy="87.5%" r="3" /><line style="stroke: #1da856; stroke-width: 2;" x1="25.9281%" y1="87.5%" x2="25.9281%" y2="87.5%" /><circle fill="#1da856" cx="32.2506%" cy="79.1667%" r="3" /><line style="stroke: #1da856; stroke-width: 2;" x1="32.2506%" y1="79.1667%" x2="25.9281%" y2="87.5%" /><circle fill="#1da856" cx="32.2506%" cy="70.8333%" r="3" /><line style="stroke: #1da856; stroke-width: 2;" x1="32.2506%" y1="70.8333%" x2="32.2506%" y2="79.1667%" /><circle fill="#1da856" cx="66.9374%" cy="66.6667%" r="3" /><line style="stroke: #1da856; stroke-width: 2;" x1="66.9374%" y1="66.6667%" x2="32.2506%" y2="70.8333%" /><circle fill="#1da856" cx="66.9374%" cy="62.5%" r="3" /><line style="stroke: #1da856; stroke-width: 2;" x1="66.9374%" y1="62.5%" x2="66.9374%" y2="66.6667%" /><circle fill="#1da856" cx="66.9374%" cy="58.3333%" r="3" /><line style="stroke: #1da856; stroke-width: 2;" x1="66.9374%" y1="58.3333%" x2="66.9374%" y2="62.5%" /><circle fill="#1da856" cx="69.4896%" cy="54.1667%" r="3" /><line style="stroke: #1da856; stroke-width: 2;" x1="69.4896%" y1="54.1667%" x2="66.9374%" y2="58.3333%" /><circle fill="#1da856" cx="69.4896%" cy="50%" r="3" /><line style="stroke: #1da856; stroke-width: 2;" x1="69.4896%" y1="50%" x2="69.4896%" y2="54.1667%" /><circle fill="#1da856" cx="94.6636%" cy="50%" r="3" /><line style="stroke: #1da856; stroke-width: 2;" x1="94.6636%" y1="50%" x2="69.4896%" y2="50%" /><circle fill="#1da856" cx="94.6636%" cy="50%" r="3" /><line style="stroke: #1da856; stroke-width: 2;" x1="94.6636%" y1="50%" x2="94.6636%" y2="50%" /><circle fill="#1da856" cx="94.6636%" cy="50%" r="3" /><line style="stroke: #1da856; stroke-width: 2;" x1="94.6636%" y1="50%" x2="94.6636%" y2="50%" /><circle fill="#1da856" cx="94.6636%" cy="50%" r="3" /><line style="stroke: #1da856; stroke-width: 2;" x1="94.6636%" y1="50%" x2="94.6636%" y2="50%" /><text fill="#1da856" x="94.66%" y="50%">alice</text><circle fill="#319d7b" cx="4.11833%" cy="95.8333%" r="3" /><circle fill="#319d7b" cx="4.17633%" cy="91.6667%" r="3" /><line style="stroke: #319d7b; stroke-width: 2;" x1="4.17633%" y1="91.6667%" x2="4.11833%" y2="95.8333%" /><circle fill="#319d7b" cx="4.17633%" cy="87.5%" r="3" /><line style="stroke: #319d7b; stroke-width: 2;" x1="4.17633%" y1="87.5%" x2="4.17633%" y2="91.6667%" /><circle fill="#319d7b" cx="6.43852%" cy="83.3333%" r="3" /><line style="stroke: #319d7b; stroke-width: 2;" x1="6.43852%" y1="83.3333%" x2="4.17633%" y2="87.5%" /><circle fill="#319d7b" cx="6.43852%" cy="79.1667%" r="3" /><line style="stroke: #319d7b; stroke-width: 2;" x1="6.43852%" y1="79.1667%" x2="6.43852%" y2="83.3333%" /><circle fill="#319d7b"cx="6.43852%" cy="75%" r="3" /><line style="stroke: #319d7b; stroke-width: 2;" x1="6.43852%" y1="75%" x2="6.43852%" y2="79.1667%" /><circle fill="#319d7b" cx="9.39675%" cy="75%" r="3" /><line style="stroke: #319d7b; stroke-width: 2;" x1="9.39675%" y1="75%" x2="6.43852%" y2="75%" /><circle fill="#319d7b" cx="9.39675%" cy="70.8333%" r="3" /><line style="stroke: #319d7b; stroke-width: 2;" x1="9.39675%" y1="70.8333%" x2="9.39675%" y2="75%" /><circle fill="#319d7b" cx="9.39675%" cy="70.8333%" r="3" /><line style="stroke: #319d7b; stroke-width: 2;" x1="9.39675%" y1="70.8333%" x2="9.39675%" y2="70.8333%" /><circle fill="#319d7b" cx="9.39675%" cy="66.6667%" r="3" /><line style="stroke: #319d7b; stroke-width: 2;" x1="9.39675%" y1="66.6667%" x2="9.39675%" y2="70.8333%" /><circle fill="#319d7b" cx="9.39675%" cy="66.6667%" r="3" /><line style="stroke: #319d7b; stroke-width: 2;" x1="9.39675%" y1="66.6667%" x2="9.39675%" y2="66.6667%" /><circle fill="#319d7b" cx="9.39675%" cy="62.5%" r="3" /><line style="stroke: #319d7b; stroke-width: 2;" x1="9.39675%" y1="62.5%" x2="9.39675%" y2="66.6667%" /><circle fill="#319d7b" cx="9.39675%" cy="62.5%" r="3" /><line style="stroke: #319d7b; stroke-width: 2;" x1="9.39675%" y1="62.5%" x2="9.39675%" y2="62.5%" /><circle fill="#319d7b" cx="40.3712%" cy="54.1667%" r="3" /><line style="stroke: #319d7b; stroke-width: 2;" x1="40.3712%" y1="54.1667%" x2="9.39675%" y2="62.5%" /><circle fill="#319d7b" cx="40.3712%" cy="45.8333%" r="3" /><line style="stroke: #319d7b; stroke-width: 2;" x1="40.3712%" y1="45.8333%" x2="40.3712%" y2="54.1667%" /><circle fill="#319d7b" cx="43.7355%" cy="45.8333%" r="3" /><line style="stroke: #319d7b; stroke-width: 2;" x1="43.7355%" y1="45.8333%" x2="40.3712%" y2="45.8333%" /><circle fill="#319d7b" cx="43.7355%" cy="45.8333%" r="3" /><line style="stroke: #319d7b; stroke-width: 2;" x1="43.7355%" y1="45.8333%" x2="43.7355%" y2="45.8333%" /><circle fill="#319d7b" cx="43.7355%" cy="45.8333%" r="3" /><line style="stroke: #319d7b; stroke-width: 2;" x1="43.7355%" y1="45.8333%" x2="43.7355%" y2="45.8333%" /><circle fill="#319d7b" cx="85.5568%" cy="41.6667%" r="3" /><line style="stroke: #319d7b; stroke-width: 2;" x1="85.5568%" y1="41.6667%" x2="43.7355%" y2="45.8333%" /><circle fill="#319d7b" cx="85.5568%" cy="37.5%" r="3" /><line style="stroke: #319d7b; stroke-width: 2;" x1="85.5568%" y1="37.5%" x2="85.5568%" y2="41.6667%" /><circle fill="#319d7b" cx="98.2019%" cy="29.1667%" r="3" /><line style="stroke: #319d7b; stroke-width: 2;" x1="98.2019%" y1="29.1667%" x2="85.5568%" y2="37.5%" /><circle fill="#319d7b" cx="98.2019%" cy="25%" r="3" /><line style="stroke: #319d7b; stroke-width: 2;" x1="98.2019%" y1="25%" x2="98.2019%" y2="29.1667%" /><circle fill="#319d7b" cx="98.2019%" cy="20.8333%" r="3" /><line style="stroke: #319d7b; stroke-width: 2;" x1="98.2019%" y1="20.8333%" x2="98.2019%" y2="25%" /><circle fill="#319d7b" cx="99.0139%" cy="16.6667%" r="3" /><line style="stroke: #319d7b; stroke-width: 2;" x1="99.0139%" y1="16.6667%" x2="98.2019%" y2="20.8333%" /><circle fill="#319d7b" cx="99.0139%" cy="12.5%" r="3" /><line style="stroke: #319d7b; stroke-width: 2;" x1="99.0139%" y1="12.5%" x2="99.0139%" y2="16.6667%" /><circle fill="#319d7b" cx="99.0139%" cy="4.16667%" r="3" /><line style="stroke: #319d7b; stroke-width: 2;" x1="99.0139%" y1="4.16667%" x2="99.0139%" y2="12.5%" /><circle fill="#319d7b" cx="99.0719%" cy="0%" r="3" /><line style="stroke: #319d7b; stroke-width: 2;" x1="99.0719%" y1="0%" x2="99.0139%" y2="4.16667%" /><circle fill="#319d7b" cx="100%" cy="0%" r="3" /><line style="stroke: #319d7b; stroke-width: 2;" x1="100%" y1="0%" x2="99.0719%" y2="0%" /><text fill="#319d7b" x="100%" y="0%">bob</text><text fill="black" x="-2%" y="2%">24</text><text fill="black" x="-2%" y="100%">0</text><text fill="black" x="98%" y="112%">02-03-17</text><text fill="black" x="0%" y="112%">02-03-17</text>
</svg>怎么能做到这一点呢？我是否缺少一些 HTML 或 css 样式或规则？我应该使用Javascript来确定屏幕高度并从客户端设置它吗？它永远不会与 SVG 对象一起使用，我应该使用其他东西来制作图形吗？
尝试使用视图高度，vh将 svg 高度设置为屏幕高度和视图宽度，vw设置屏幕宽度。
<svg xmlns="http://www.w3.org/2000/svg" style="margin: 2%; border: 1px solid black; border-image: none; width: 90vw; height: 100vh;">
这是小提琴
https://jsfiddle.net/wroceofz/
如果你可以在它周围放一个包装器，你可以使用绝对定位来实现这种效果。我通常更喜欢它而不是 vh/vw 单位。
<div style="position:absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;">
<svg xmlns="http://www.w3.org/2000/svg" style="display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;">
<circle fill="#1da856" cx="0%" cy="100%" r="3" /><circle fill="#1da856" cx="0%" cy="100%" r="3" /><line style="stroke: #1da856; stroke-width: 2;" x1="0%" y1="100%" x2="0%" y2="100%" /><circle fill="#1da856" cx="0%" cy="100%" r="3" /><line style="stroke: #1da856; stroke-width: 2;" x1="0%" y1="100%" x2="0%" y2="100%" /><circle fill="#1da856" cx="0%" cy="100%" r="3" /><line style="stroke: #1da856; stroke-width: 2;" x1="0%" y1="100%" x2="0%" y2="100%" /><circle fill="#1da856" cx="21.4617%" cy="95.8333%" r="3" /><line style="stroke: #1da856; stroke-width: 2;" x1="21.4617%" y1="95.8333%" x2="0%" y2="100%" /><circle fill="#1da856" cx="21.4617%" cy="95.8333%" r="3" /><line style="stroke: #1da856; stroke-width: 2;" x1="21.4617%" y1="95.8333%" x2="21.4617%" y2="95.8333%" /><circle fill="#1da856" cx="21.4617%" cy="95.8333%" r="3" /><line style="stroke: #1da856; stroke-width: 2;" x1="21.4617%" y1="95.8333%" x2="21.4617%" y2="95.8333%" /><circle fill="#1da856" cx="21.4617%" cy="91.6667%" r="3" /><line style="stroke: #1da856; stroke-width: 2;" x1="21.4617%" y1="91.6667%" x2="21.4617%" y2="95.8333%" /><circle fill="#1da856" cx="21.4617%" cy="87.5%" r="3" /><line style="stroke: #1da856; stroke-width: 2;" x1="21.4617%" y1="87.5%" x2="21.4617%" y2="91.6667%" /><circle fill="#1da856" cx="25.9281%" cy="87.5%" r="3" /><line style="stroke: #1da856; stroke-width: 2;" x1="25.9281%" y1="87.5%" x2="21.4617%" y2="87.5%" /><circle fill="#1da856" cx="25.9281%" cy="87.5%" r="3" /><line style="stroke: #1da856; stroke-width: 2;" x1="25.9281%" y1="87.5%" x2="25.9281%" y2="87.5%" /><circle fill="#1da856" cx="32.2506%" cy="79.1667%" r="3" /><line style="stroke: #1da856; stroke-width: 2;" x1="32.2506%" y1="79.1667%" x2="25.9281%" y2="87.5%" /><circle fill="#1da856" cx="32.2506%" cy="70.8333%" r="3" /><line style="stroke: #1da856; stroke-width: 2;" x1="32.2506%" y1="70.8333%" x2="32.2506%" y2="79.1667%" /><circle fill="#1da856" cx="66.9374%" cy="66.6667%" r="3" /><line style="stroke: #1da856; stroke-width: 2;" x1="66.9374%" y1="66.6667%" x2="32.2506%" y2="70.8333%" /><circle fill="#1da856" cx="66.9374%" cy="62.5%" r="3" /><line style="stroke: #1da856; stroke-width: 2;" x1="66.9374%" y1="62.5%" x2="66.9374%" y2="66.6667%" /><circle fill="#1da856" cx="66.9374%" cy="58.3333%" r="3" /><line style="stroke: #1da856; stroke-width: 2;" x1="66.9374%" y1="58.3333%" x2="66.9374%" y2="62.5%" /><circle fill="#1da856" cx="69.4896%" cy="54.1667%" r="3" /><line style="stroke: #1da856; stroke-width: 2;" x1="69.4896%" y1="54.1667%" x2="66.9374%" y2="58.3333%" /><circle fill="#1da856" cx="69.4896%" cy="50%" r="3" /><line style="stroke: #1da856; stroke-width: 2;" x1="69.4896%" y1="50%" x2="69.4896%" y2="54.1667%" /><circle fill="#1da856" cx="94.6636%" cy="50%" r="3" /><line style="stroke: #1da856; stroke-width: 2;" x1="94.6636%" y1="50%" x2="69.4896%" y2="50%" /><circle fill="#1da856" cx="94.6636%" cy="50%" r="3" /><line style="stroke: #1da856; stroke-width: 2;" x1="94.6636%" y1="50%" x2="94.6636%" y2="50%" /><circle fill="#1da856" cx="94.6636%" cy="50%" r="3" /><line style="stroke: #1da856; stroke-width: 2;" x1="94.6636%" y1="50%" x2="94.6636%" y2="50%" /><circle fill="#1da856" cx="94.6636%" cy="50%" r="3" /><line style="stroke: #1da856; stroke-width: 2;" x1="94.6636%" y1="50%" x2="94.6636%" y2="50%" /><text fill="#1da856" x="94.66%" y="50%">alice</text><circle fill="#319d7b" cx="4.11833%" cy="95.8333%" r="3" /><circle fill="#319d7b" cx="4.17633%" cy="91.6667%" r="3" /><line style="stroke: #319d7b; stroke-width: 2;" x1="4.17633%" y1="91.6667%" x2="4.11833%" y2="95.8333%" /><circle fill="#319d7b" cx="4.17633%" cy="87.5%" r="3" /><line style="stroke: #319d7b; stroke-width: 2;" x1="4.17633%" y1="87.5%" x2="4.17633%" y2="91.6667%" /><circle fill="#319d7b" cx="6.43852%" cy="83.3333%" r="3" /><line style="stroke: #319d7b; stroke-width: 2;" x1="6.43852%" y1="83.3333%" x2="4.17633%" y2="87.5%" /><circle fill="#319d7b" cx="6.43852%" cy="79.1667%" r="3" /><line style="stroke: #319d7b; stroke-width: 2;" x1="6.43852%" y1="79.1667%" x2="6.43852%" y2="83.3333%" /><circle fill="#319d7b" cx="6.43852%" cy="75%" r="3" /><line style="stroke: #319d7b; stroke-width: 2;" x1="6.43852%" y1="75%" x2="6.43852%" y2="79.1667%" /><circle fill="#319d7b" cx="9.39675%" cy="75%" r="3" /><line style="stroke: #319d7b; stroke-width: 2;" x1="9.39675%" y1="75%" x2="6.43852%" y2="75%" /><circle fill="#319d7b" cx="9.39675%" cy="70.8333%" r="3" /><line style="stroke: #319d7b; stroke-width: 2;" x1="9.39675%" y1="70.8333%" x2="9.39675%" y2="75%" /><circle fill="#319d7b" cx="9.39675%" cy="70.8333%" r="3" /><line style="stroke: #319d7b; stroke-width: 2;" x1="9.39675%" y1="70.8333%" x2="9.39675%" y2="70.8333%" /><circle fill="#319d7b" cx="9.39675%" cy="66.6667%" r="3" /><line style="stroke: #319d7b; stroke-width: 2;" x1="9.39675%" y1="66.6667%" x2="9.39675%" y2="70.8333%" /><circle fill="#319d7b" cx="9.39675%" cy="66.6667%" r="3" /><line style="stroke: #319d7b; stroke-width: 2;" x1="9.39675%" y1="66.6667%" x2="9.39675%" y2="66.6667%" /><circle fill="#319d7b" cx="9.39675%" cy="62.5%" r="3" /><line style="stroke: #319d7b; stroke-width: 2;" x1="9.39675%" y1="62.5%" x2="9.39675%" y2="66.6667%" /><circle fill="#319d7b" cx="9.39675%" cy="62.5%" r="3" /><line style="stroke: #319d7b; stroke-width: 2;" x1="9.39675%" y1="62.5%" x2="9.39675%" y2="62.5%" /><circle fill="#319d7b" cx="40.3712%" cy="54.1667%" r="3" /><line style="stroke: #319d7b; stroke-width: 2;" x1="40.3712%" y1="54.1667%" x2="9.39675%" y2="62.5%" /><circle fill="#319d7b" cx="40.3712%" cy="45.8333%" r="3" /><line style="stroke: #319d7b; stroke-width: 2;" x1="40.3712%" y1="45.8333%" x2="40.3712%" y2="54.1667%" /><circle fill="#319d7b" cx="43.7355%" cy="45.8333%" r="3" /><line style="stroke: #319d7b; stroke-width: 2;" x1="43.7355%" y1="45.8333%" x2="40.3712%" y2="45.8333%" /><circle fill="#319d7b" cx="43.7355%" cy="45.8333%" r="3" /><line style="stroke: #319d7b; stroke-width: 2;" x1="43.7355%" y1="45.8333%" x2="43.7355%" y2="45.8333%" /><circle fill="#319d7b" cx="43.7355%" cy="45.8333%" r="3" /><line style="stroke: #319d7b; stroke-width: 2;" x1="43.7355%" y1="45.8333%" x2="43.7355%" y2="45.8333%" /><circle fill="#319d7b" cx="85.5568%" cy="41.6667%" r="3" /><line style="stroke: #319d7b; stroke-width: 2;" x1="85.5568%" y1="41.6667%" x2="43.7355%" y2="45.8333%" /><circle fill="#319d7b" cx="85.5568%" cy="37.5%" r="3" /><line style="stroke: #319d7b; stroke-width: 2;" x1="85.5568%" y1="37.5%" x2="85.5568%" y2="41.6667%" /><circle fill="#319d7b" cx="98.2019%" cy="29.1667%" r="3" /><line style="stroke: #319d7b; stroke-width: 2;" x1="98.2019%" y1="29.1667%" x2="85.5568%" y2="37.5%" /><circle fill="#319d7b" cx="98.2019%" cy="25%" r="3" /><line style="stroke: #319d7b; stroke-width: 2;" x1="98.2019%" y1="25%" x2="98.2019%" y2="29.1667%" /><circle fill="#319d7b" cx="98.2019%" cy="20.8333%" r="3" /><line style="stroke: #319d7b; stroke-width: 2;" x1="98.2019%" y1="20.8333%" x2="98.2019%" y2="25%" /><circle fill="#319d7b" cx="99.0139%" cy="16.6667%" r="3" /><line style="stroke: #319d7b; stroke-width: 2;" x1="99.0139%" y1="16.6667%" x2="98.2019%" y2="20.8333%" /><circle fill="#319d7b" cx="99.0139%" cy="12.5%" r="3" /><line style="stroke: #319d7b; stroke-width: 2;" x1="99.0139%" y1="12.5%" x2="99.0139%" y2="16.6667%" /><circle fill="#319d7b" cx="99.0139%" cy="4.16667%" r="3" /><line style="stroke: #319d7b; stroke-width: 2;" x1="99.0139%" y1="4.16667%" x2="99.0139%" y2="12.5%" /><circle fill="#319d7b" cx="99.0719%" cy="0%" r="3" /><line style="stroke: #319d7b; stroke-width: 2;" x1="99.0719%" y1="0%" x2="99.0139%" y2="4.16667%" /><circle fill="#319d7b" cx="100%" cy="0%" r="3" /><line style="stroke: #319d7b; stroke-width: 2;" x1="100%" y1="0%" x2="99.0719%" y2="0%" /><text fill="#319d7b" x="100%" y="0%">bob</text><text fill="black" x="-2%" y="2%">24</text><text fill="black" x="-2%" y="100%">0</text><text fill="black" x="98%" y="112%">02-03-17</text><text fill="black" x="0%" y="112%">02-03-17</text>
</svg>
</div>
JS小提琴：https://jsfiddle.net/n057d20n/