이 SVG 이미지의 높이가 150px 인 이유

Question

이 500px 컨테이너 안에이 SVG 이미지가 150px 높이로 표시되는 이유는 무엇입니까? 왜이 특정한 가치인가?

js bin과 Codepen에서이 이상한 동작이 발견되었으므로 온라인 편집자가 아닌 내 코드와 관련이 있다고 생각합니다.

참고 : 같은 일에서 700 개 픽셀 사업부 컨테이너 결과. 따라서 부모의 키는 중요하지 않습니다.

<div style="padding: 30px; background-color: yellow; height: 500px; width: 500px; "> 
<svg> 

    <pattern id="basicPattern" x="10" y="10" width="40" height="40" patternUnits="userSpaceOnUse" > 
     <rect x= "0" y="0" width="4" height="4" 
      stroke = "red" 
      stroke-width = "1" 
      fill = "black"/> 
    </pattern> 
    <!-- <rect x="0" y="0" width="300" height="151" // why this deletes the bottom line? --> 
    <!-- <rect x="0" y="0" width="300" height="150" // why this deletes 1 px from the bottom line? --> 

    <!-- but this height="149" is the bottom limmit for this picture.. 
     what prevent's it bor beeing extended further - we have unthil 500 px as you can see on the div.--> 

    <rect x="0" y="0" width="300" height="149" 
    stroke= "red" 
    stroke-width="2" 
    fill="url(#basicPattern)" /> 
</svg> 

This is Jsbin 및 this is CodePen.

Answer 1

는 일부 사용자 에이전트 (X 150 픽셀 높이 300 픽셀 폭의 기본 크기로 이동합니다 있도록이는 SVG width 및 height를 설정하지 않은).

다음은 SVG 너비와 높이가 모두 500px 인 JSBin입니다. 이제 직사각형의 높이가 150 픽셀을 초과 할 수 있습니다. https://jsbin.com/yafenemawe/1/edit?html,output