为什么这个 SVG 图像的高度为 150px [英] Why does this SVG image have a height of 150px

问题描述

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

Why is this SVG image displayed at 150px height inside this 500px container? Why this specific value?

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

I found this weird behavior in both js bin and Codepen, so I think it is something to do with my code and not with the online editors.

注意:一个 700px 的 div 容器会产生同样的结果.所以父母的身高并不重要.

Note: a 700px div container results in the same thing. So the height of the parent doesn't matter.

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

推荐答案

您没有设置 SVG width 和 height，所以它转到默认大小300 px 宽 x 150 px 高(对于某些用户代理).

You didn't set the SVG width and height, so it goes to the default size of 300 px width x 150 px height (for some user-agents).

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

Here is your JSBin with the SVG width and height both set to 500px. Now the rectangle can go beyond 150px of height: https://jsbin.com/yafenemawe/1/edit?html,output

这篇关于为什么这个 SVG 图像的高度为 150px的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！