Question

我试图更好地理解SVG及其viewBox和IMG标签。

我正在加载一个恰好是SVG文件的IMG。以下CodePen示例显示了2个IMG svg文件。第一个是没有viewBox属性的SVG，第二个是相同的图像，但vieweBox属性设置为viewBox =＆＃34; 0 0 68 248＆＃34;。

我理解为什么第二个IMG会完全显示出来。我不明白为什么第一个IMG决定将自己显示为300x150像素大小的剪辑。它似乎是一个特定的尺寸，但我认为没有理由做出这种选择。

任何解释？

CodePen: [https://codepen.io/anon/pen/WXMKVp][1]

这里的记录是第一个IMG svg代码......

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">

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

Answer 1

300 x 150是浏览器，告知您未提供有效的大小调整信息，因此无法计算valid width或valid height。如果默认为0x0，您可能会认为这是因为图像本身无效。

SVG - 为什么没有viewBox剪辑IMG显示？

1 个答案: