浏览器缩放和 .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 /> */
}

I then use the object command in html:

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

经过很多努力，我终于成功地在IE和Chrome中使用100％（默认）缩放使它们看起来好了，但是当我切换到Firefox时，它们显然使用不同的默认缩放比例，图片太大了。您可以在网站上查看：http://s23345.sigmabokhald.is/。我该怎么做才能使.svg图片随着缩放适当地缩放？以便如果我在浏览器中缩小或放大，则图片会与背景适当地缩放。

- Zyrac

---

当您使用<img src="path/to/svg" />而不是对象时，效果如何？图像具有更普遍的支持，并且看起来更可预测。 - somethinghere

当我使用<img src>命令而不是<object>时，图像在Internet Explorer中表现得非常奇怪。当我首次打开页面时，它看起来很好，但当我单击链接以打开页面时，图片的形状会改变。很难解释，我只是无法让它在IE中正常工作，但在Chrome和Firefox中使用<img src>可以正常工作。 - Zyrac

你可能想把其中一个齿轮稍微移动一下，这样它们就不会全部锁在一起了。试着旋转其中一个，你就会明白我在说什么了。 - Filip Haglund

Answer 1

我简短地检查了您在Mozilla和Chrome浏览器中的齿轮行为。（顺便说一下，设计很可爱 :-) ）在我看来，齿轮会粘附到您的框的大小上。这意味着，如果您允许此框在浏览器缩放时“调整大小”，则齿轮会采用相应的大小。通过将您的设置为0,0/100%,100%，齿轮无法适应。您有这个.limit.tight定义，这是一个很好的示例，说明齿轮箱应该如何运作。因此，如果我相应地修改.my-svg，就像这样：

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

我没有改变任何其他东西。它也可以在Chrome上运行。如果我在Mozilla中缩放，齿轮的外观如下：

我希望这是一个好的开始，即使可能需要更多的工作来适配更多的浏览器。

- peter_the_oak

---

谢谢，这有助于解决许多缩放问题。在火狐浏览器上，100%缩放仍然存在问题，SVG图片略微过大。我发现了原因，非常奇怪，我的Firefox浏览器似乎强制使用@media only screen and (max-width:1400px)，screen and (max-height:800px)设置，即使我在1920x1080的Windows上运行。我的Chrome和IE浏览器不会这样做。如果我在http://quirktools.com/screenfly上使用Firefox测试网页，它就没有这个问题。 - Zyrac