Javascript 如何在html页面中以屏幕百分比设置svg高度

我在一个HTML页面中创建了一个带有svg对象的图形，我想给出与屏幕相同的高度。我想我可以通过将样式设置为高度来做到这一点：100%这是行不通的。我在Chrome、IE11或更低版本中进行了测试

关于这个话题，我读了很多书，但找不到一种真正有效的方法，并且给出了与屏幕高度相同的高度

那么，如何使SVG对象与屏幕一样大呢

这里是一个JSFIDLE，我将样式设置为100%高度

以下是我的html代码：

AliceBo24002-03-1702-03-17

尝试使用viewheight、

vh

将svg高度设置为屏幕高度和viewwidth，使用

vw

设置屏幕宽度

<svg xmlns="http://www.w3.org/2000/svg" style="margin: 2%; border: 1px solid black; border-image: none; width: 90vw; height: 100vh;">

这是小提琴

---

如果你能在它周围放一个包装，你可以使用绝对定位来达到这个效果。与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>

AliceBo24002-03-1702-03-17

---

JS FIDLE:

你能告诉我为什么你更喜欢包装机而不是vh和vw装置吗？它们被列为旧IE版本的“部分支持”，在IE8和以前的版本中根本不受支持。对于vh/vw，如果您决定设置任何类型的导航栏（这很常见），您也会遇到尺寸不正确的问题。资料来源：thanx对我有帮助！太平洋标准时间。如果答案对您有帮助，请接受：）