为什么这个SVG图像的高度是150像素？

Question

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

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

注意：一个700像素的div容器会产生相同的效果。因此父元素的高度并不重要。

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

这是 Jsbin 和 这是 CodePen。

- AIon

Answer 1

您没有设置SVG的width和height，所以它会采用默认大小，即300px宽度x150px高度（对于某些用户代理）。

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

- Gerardo Furtado

---

在研究今天的 D3未设置自身高度并截断最后一个数据项 时，我发现了您发布的一些帖子，声称300×150px是默认大小。还有 为什么100%等于150像素？，其中被接受的答案引用了我在评论中链接的Amelia Bellamy-Royds的帖子。然而，我无法找到任何实际支持这个假设的参考资料。HTML规范为<video>元素定义了这些尺寸，但没有为SVG定义。您知道任何支持此说法的来源吗？ - altocumulus

一年多以后，这里是参考链接：https://svgwg.org/specs/integration/#svg-css-sizing。它说：“如果任何尺寸属性缺失，则将缺失的SVG元素宽度解析为'300px'并将缺失的高度解析为'150px'”。 - Gerardo Furtado

感谢您的跟进！虽然这份文件只有3天的历史，但我还是很满意它能够完成;-) 我总是觉得这些尺寸很不喜欢，它们感觉很随意... 2:1的纵横比到底是什么意思呢？我简要地浏览了一下工作组会议的记录，但没有找到任何解释。45k挑战：找出这些相当奇怪数字背后的原因！ - altocumulus

在我的情况下，我有一个SVG文件，其高度和宽度设置为100％。然而，SVG的高度为150px。为了解决这个问题，我在我的CSS中添加了：html，body {margin: 0; height: 100％}。 - mando