svg - 为什么这个 SVG 图像的高度为 150px

Question

为什么这个 SVG 图像在这个 500 像素的容器内以 150 像素的高度显示？为什么是这个特定值？

我在 js bin 和 Codepen 中都发现了这种奇怪的行为，所以我认为这与我的代码有关，而不是与在线编辑器有关。



注意:一个 700px 的 div 容器会产生同样的结果。所以 parent 的高度并不重要。

<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

您没有设置 SVG width 和 height ，因此默认大小为 300 px 宽 x 150 px 高(对于某些用户代理)。

这是您的 JSBin，SVG 宽度和高度都设置为 500px。现在矩形可以超过 150px 的高度:https://jsbin.com/yafenemawe/1/edit?html,output