svg的 viewBox理解

<svg id="ps4" width="400" height="400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 894.7 448.4" style="display: block;" xml:space="preserve">
    <g>
      <path d="M563.9,361.4L582 303.3 892.9 103.1 876.4 156.5 z" style="stroke-dasharray: 861px, 861px; stroke-dashoffset: 0px;"></path>
      <path d="M892.9,103.1L573.4 40.3 571.8 42.7 568.1 41.7 569.7 38.7 388.1 1 41.8 162.8 235.7 212.2 582 303.3 "></path>
      <path d="M225.8,271.4L241.7 213.8 573.4 40.3 " style="stroke-dasharray: 435px, 435px; stroke-dashoffset: 0px;"></path>
      <path d="M221.1,269.8L237.7 212.8 569.7 38.7 " style="stroke-dasharray: 435px, 435px; stroke-dashoffset: 0px;"></path>
      <path d="M41.8,162.8L23.7 217.5 563.9 361.4 " style="stroke-dasharray: 617px, 617px; stroke-dashoffset: 0px;"></path>
      <path d="M51.4,224.8L51.4 235.8 313.6 306.9 " style="stroke-dasharray: 283px, 283px; stroke-dashoffset: 0px;"></path>
      <path d="M848.9,175.1L869.1 178.7 855 232.3 537.8 447.3 407.9 410.3 222.6 357.6 201.2 351.5 202.8 346.4 196 351.5 1.2 297 16.9 242.6 48.9 224.8 " style="stroke-dasharray: 1119px, 1119px; stroke-dashoffset: 0px;"></path>
      <path d="M16.9,242.6L555 388.6 869.1 178.7 " style="stroke-dasharray: 936px, 936px; stroke-dashoffset: 0px;"></path>
      <path d="M547,356.9L547 369.8 395.4 330.7 " style="stroke-dasharray: 170px, 170px; stroke-dashoffset: 0px;"></path>
      <line x1="196" y1="351.5" x2="211.8" y2="295.5"></line>
      <line x1="201.2" y1="351.5" x2="218.1" y2="297.4"></line>
      <g class="usb-ports">
        <path d="M323.9,300.4L323.9 311.2 345.5 316.7 345.5 305.7 z" style="stroke-dasharray: 67px, 67px; stroke-dashoffset: 0px;"></path>
        <line x1="326" y1="308.6" x2="343.3" y2="312.5"></line>
        <path d="M370.2,313.1L370.2 323.8 391.8 329.3 391.8 318.3 z" style="stroke-dasharray: 67px, 67px; stroke-dashoffset: 0px;"></path>
        <line x1="372.3" y1="321.2" x2="389.6" y2="325.1"></line>
      </g>
      <g class="ps4-logo">
        <path d="M475.6,313.8l2.7-6.7l13.5,4.1c1.9,0.1,7.6-2.1,3-7.1l-14.5-4.1" style="stroke-dasharray: 47px, 47px; stroke-dashoffset: 0px;"></path>
        <path d="M521.4,311.2l-8.4-3c0,0-2.1-0.8-3.1,1.5l-3.7,9.9c0,0-1,1.8-3.1,1.2l-7.7-2.5" style="stroke-dasharray: 35px, 35px; stroke-dashoffset: 0px;"></path>
        <path d="M533.2,330.7L538.9 315.8 519.2 322.2 538.1 328.8 " style="stroke-dasharray: 57px, 57px; stroke-dashoffset: 0px;"></path>
      </g>
    </g>
  </svg>

上述代码中，默认图形大小是894.7 448.4尺寸， 如果不用viewBox 那么在SVG中显示的图形只有完整图形的一部分，也就是400，400部分， 而用了viewBox则会将整个图形截取，然后等比例放大或者缩小，布满svg