html 페이지에서 svg 높이를 화면 비율로 설정하는 방법

Question

HTML 페이지에 svg 객체가있는 그래프를 만들었습니다.이 그래프는 화면과 동일한 높이를 부여하고 싶습니다. 스타일을 높이로 설정하면 효과가 있다고 생각했습니다. 100 %는 효과가 없습니다. Chrome, IE11 또는 그 아래에서 테스트했습니다.

나는이 주제에 대해 많이 읽었지만 실제 효과가 있고 화면 높이와 동일한 높이를 제공하지 못했습니다.

그래서 SVG 객체를 화면과 같이 크게 만드는 방법은 무엇입니까? 이것은 어떻게

<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>

을 수행 할 수 있습니다 : 여기

내가 100 % 높이 여기 https://jsfiddle.net/gz3ywdcm/

내 HTML 코드는에 스타일을 설정 한 jsfiddle입니까? HTML 또는 CSS 스타일이나 규칙이 누락 되었습니까? 자바 스크립트를 사용하여 스크린 높이를 결정하고 클라이언트 측에서 설정해야합니까? SVG 객체로는 절대 작동하지 않을 것이고 그래프를 만들기 위해 다른 것을 사용해야합니까?

Answer 1

화면 높이에 대한 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/

Answer 2

입니다. 나는 보통 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 바이올린 : 당신은 VH 및 폭스 바겐 단위 이상 래퍼를 선호하는 이유 https://jsfiddle.net/n057d20n/이