浏览器缩放和.svg图片

Question

我正在使用我在Adobe Illustrator中制作的.svg图片，并且我将它们附加到此css的背景中：

（容器）

.numbertable {
    position:relative;
    display: inline-block;
    padding-bottom: 80%;
    vertical-align: middle;
    width:41%;
    }

（图片）

.my-svg{ /* svg into : object, img or inline */
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%; /* only required for <img /> */
}

然后我在html中使用object命令：

<object class="my-svg" type="image/svg+xml" data="/img/composite/scale2.svg" width="100%" height="100%"></object>

经过多方努力，我终于设法让它们在I.E.看起来很好看。和Chrome使用100％（默认）缩放，但当我切换到Firefox时，他们显然使用不同的默认缩放，图片太大了。

您可以在网站上看到它：http://s23345.sigmabokhald.is/

如何通过缩放使.svg图片适当缩放？因此，如果我缩小并放入（在我的浏览器中），则图片会根据背景进行适当缩放。

Answer 1

我很快就检查了Mozilla和Chrome浏览器中的齿轮行为。 （可爱的设计，顺便说一下:-)）

在我看来，齿轮的尺寸与<object>框的大小相当。这意味着，如果您在浏览器放大和缩小时允许此框“调整大小”，则齿轮会采用。通过将<object>设置为0,0 / 100％，100％，齿轮无法采用。

您有.limit.tight这个定义，这是齿轮箱应该如何表现的一个很好的示例。所以，如果我改变.my-svg就像这样：

.my-svg {
  display: block;
  margin-left: auto;
  max-width: 960px;
}

我没有改变任何其他事情。它也适用于Chrome。如果我使用Mozilla进行缩放，这是齿轮的显示方式：

我希望这是一个良好的开端，即使可以为更多浏览器做更多工作。