Question

如果您检查Stackoverflow徽标，您会发现它是一个{SVC图像作为背景的<a>元素。

#hlogo a {
    text-indent: -999em;
    display: block;
    width: 200px;
    height: 50px;
    background-image: url("img/sprites.png?v=c4222387135a");
    background-image: url("img/sprites.svg?v=1bc768be1b3c"),none;
    background-position: top left;
    background-repeat: no-repeat;
    position: relative;
    top: 5px;
}

在Chrome中使用开发者工具检查SVG图像时，它表示图像尺寸为240 * 500。

<a>元素的大小为200 * 50像素。

那么如何计算240 * 500像素，SVG图像的大小？

我们都知道SVG是一个可扩展的图像，基于矢量，所以它不应该有固定的像素大小。

根据当前的元素背景，我无法弄明白。

Answer 1

我找到了答案。

因为它在SVG定义中提到过。

宽度=＆＃34; 240像素＆＃34;高度=＆＃34; 500像素＆＃34;

<?xml version="1.0" encoding="UTF-8"?><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="240px" height="500px" viewBox="0 0 240 500" enable-background="new 0 0 240 500" xml:space="preserve">
<g id="Layer_2_1_">
</g>
</svg>

Answer 2

它说它是250 x 500的原因是因为svg不仅包含Stack Overflow徽标。见下图。

它看起来像是一个精灵表。这就是为什么当您查看徽标的高度时存在高度差异的原因。

大小应该基于矢量创建时的初始大小。由于创建时必须具有默认大小，否则x和y坐标值没有定义的维度就没有意义。

因此，当创建此svg时，它是使用尺寸250 x 500创建的，并且矢量基于这些尺寸。

如何计算SVG图像像素大小

2 个答案: