为什么 SVG 图像的高度为 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 x="10" y="10" patternUnits="userSpaceOnUse" >
<rect x= "0" y="0"
stroke = "red"
stroke-
fill = "black"/>
</pattern>
<!-- <rect x="0" y="0" // why this deletes the bottom line? -->
<!-- <rect x="0" y="0" // why this deletes 1 px from the bottom line? -->
<!-- but this 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"
stroke= "red"
stroke-
fill="url(#basicPattern)" />
</svg>
正确答案
您没有设置 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
这篇好文章是转载于：学新通技术网
