Warum hat dieses SVG-Bild eine Höhe von 150px

Question

Warum wird dieses SVG-Bild in diesem 500px-Container auf 150px Höhe angezeigt? Warum dieser bestimmte Wert?

Ich fand dieses seltsame Verhalten sowohl in js bin und Codepen, also denke ich, dass es etwas mit meinem Code zu tun hat und nicht mit den Online-Editoren.

Hinweis: ein 700px div Container Ergebnisse in der gleichen Sache. Also ist die Höhe des Elternteils egal.

<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 und this is CodePen.

Answer 1

Sie nicht die SVG gesetzt haben width und height, so dass es auf die Standardgröße von 300 Pixel Breite x 150 Pixel Höhe (für einige User-Agents geht).

Hier ist Ihr JSBin mit der SVG Breite und Höhe beide auf 500px eingestellt. Jetzt kann das Rechteck 150px der Höhe überschreiten: https://jsbin.com/yafenemawe/1/edit?html,output