SVG
SVG - 为什么没有viewBox剪辑IMG显示？(SVG — Why does no viewBox clip IMG display?)我试图更好地理解SVG及其viewBox和IMG标签。
我正在加载一个恰好是SVG文件的IMG。 以下CodePen示例显示了2个IMG svg文件。 第一个是没有viewBox属性的SVG，第二个是相同的图像，但vieweBox属性设置为viewBox =“0 0 68 248”。
我明白为什么第二个IMG会像它一样全部显示。 我不明白为什么第一个IMG决定将自己显示为300x150像素大小的剪辑。 看起来这样一个特定的大小，但我没有看到这种选择的理由。
任何解释？
CodePen: [][1]这里的记录是第一个IMG svg代码......
<svg version="1.1" xmlns=""> <style> #Glass_Fluid_Reflection { fill:#E77C62; } #Fluid { fill:#DF543D; } </style> <path id="Fluid" d="M49.2,198.7c-2.2-2.1-4.6-3.6-7.3-4.5V21.3H26.3v172.8c-2.7,1-5.1,2.5-7.2,4.5 c-4.2,4-6.2,8.7-6.2,14.3c0,5.6,2,10.3,6.2,14.3c4.1,3.9,9.1,5.9,15.1,5.9c5.9,0,10.9-2,15-5.9c4.2-4,6.2-8.7,6.2-14.3 C55.4,207.4,53.4,202.7,49.2,198.7z"/> <path id="Glass_Fluid_Reflection" d="M42.4,200.7c-1.5-2.3-3.9-3.5-7.3-3.7c-0.3-0.1-0.7-0.1-1,0V30.8 c0-0.6-0.2-1.1-0.7-1.5s-1-0.7-1.7-0.7c-0.6,0-1.3,0.3-1.7,0.7c-0.4,0.4-0.7,0.9-0.7,1.5v167c-1.4,0.4-2.9,1-4.3,1.9 c-3.3,2-5.6,4.4-6.9,7.4c-1.2,2.9-1.2,5.5,0.3,7.8c1.4,2.1,3.4,2.6,6.2,1.7c1.5-0.5,4.5-1.9,8.8-4.5c4.3-2.5,7-4.3,8.2-5.4 C43.5,204.6,43.8,202.7,42.4,200.7z"/></svg>Im trying to better understand SVG and its viewBox and the IMG tag.
I'm loading in an IMG which happens to be an SVG file. The following CodePen sample shows 2 IMG svg files. The first is an SVG with no viewBox attribute and the second is the same image but with the vieweBox attribute set to viewBox="0 0 68 248".
I understand why the second IMG is showing in full as it does. What i dont understand is why the first IMG is deciding to show itself as clipped at a 300x150 pixel size. It seems such a specific size yet i see no reason for that choice.
Any explainations?
CodePen: [][1]For the record here is the first IMG svg code...
<svg version="1.1" xmlns=""> <style> #Glass_Fluid_Reflection { fill:#E77C62; } #Fluid { fill:#DF543D; } </style> <path id="Fluid" d="M49.2,198.7c-2.2-2.1-4.6-3.6-7.3-4.5V21.3H26.3v172.8c-2.7,1-5.1,2.5-7.2,4.5 c-4.2,4-6.2,8.7-6.2,14.3c0,5.6,2,10.3,6.2,14.3c4.1,3.9,9.1,5.9,15.1,5.9c5.9,0,10.9-2,15-5.9c4.2-4,6.2-8.7,6.2-14.3 C55.4,207.4,53.4,202.7,49.2,198.7z"/> <path id="Glass_Fluid_Reflection" d="M42.4,200.7c-1.5-2.3-3.9-3.5-7.3-3.7c-0.3-0.1-0.7-0.1-1,0V30.8 c0-0.6-0.2-1.1-0.7-1.5s-1-0.7-1.7-0.7c-0.6,0-1.3,0.3-1.7,0.7c-0.4,0.4-0.7,0.9-0.7,1.5v167c-1.4,0.4-2.9,1-4.3,1.9 c-3.3,2-5.6,4.4-6.9,7.4c-1.2,2.9-1.2,5.5,0.3,7.8c1.4,2.1,3.4,2.6,6.2,1.7c1.5-0.5,4.5-1.9,8.8-4.5c4.3-2.5,7-4.3,8.2-5.4 C43.5,204.6,43.8,202.7,42.4,200.7z"/></svg> 最满意答案300 x 150是浏览器，告诉您没有提供有效的大小调整信息，因此无法计算有效宽度或有效高度 。 如果默认为0x0，您可能会认为这是因为图像本身无效。
300 x 150 is the browser telling you you've not provided valid sizing information so it cannot calculate a valid width or a valid height. If it defaulted to 0x0 you might think that was because the image itself was invalid.