为什么这个 SVG 图像的高度是 150px答案

【问题标题】：Why does this SVG image have a height of 150px为什么这个 SVG 图像的高度是 150px
【发布时间】：2017-03-02 14:07:09
【问题描述】：

为什么这个 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>

This is Jsbin 和 this is CodePen.

【问题讨论】：

标签： svg jsbin codepen

【解决方案1】：

您没有设置 SVG width 和 height，因此它的默认大小为 300 像素宽 x 150 像素高（对于某些用户代理）。

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

【讨论】：

在挖掘今天的D3 not setting its own height and cutting off last data item 时，我发现你的一些帖子声称 300×150px 是默认大小。还有Why does 100% equal 150 pixels?，其中接受的答案是指我在评论中链接到的 Amelia Bellamy-Royds 的帖子。但是，我无法找到实际支持这一假设的参考资料。 HTML 规范为 <video> 元素定义了这些尺寸，但没有为 SVG 定义。你知道支持这个的任何来源吗？
@altocumulus 一年多后，这里是参考：svgwg.org/specs/integration/#svg-css-sizing。它说：“如果缺少任何尺寸属性，请将缺少的‘svg’元素宽度解析为‘300px’，将缺少的高度解析为‘150px’”.
感谢您的跟进！虽然文件在 3 天前才生效，但我很满意 ;-) 我总是发现自己不喜欢这些维度，他们只是觉得太武断了......无论如何，2:1 的纵横比是多少？我简要浏览了工作组会议的一些记录，以寻找解释，但没有找到任何解释。 45k 挑战：找出这些奇数背后的原因！
在我的例子中，我有一个 SVG 文件，其高度和宽度设置为 100%。但是，SVG 高 150 像素。为了解决这个问题，我在我的 CSS 中添加了： html, body {margin: 0;高度：100%}。