使用SVG的img元素在Firefox中的表现如何？

Question

尝试使不同浏览器中的所有SVG图像兼容时，我在Firefox上遇到了问题。

我在img元素中使用了.SVG图像。类似于以下内容：

<img src="image.svg" />

如果您能看到下面的图像，似乎SVG被重复了。如果我将SVG用作背景图像，则可能可以使用background-repeat：no-repeat，但在这种情况下，我需要在img元素中使用SVG，并且无法将background-repeat指定为img元素。

我该如何解决这个问题？欢迎所有答案。

- Jorge Guerola

---

图片是如何重复的呢？这是一个精灵SVG吗？你能否制作一个JSfiddle并放入实际图片？ - Paulie_D

我不知道为什么会重复。不需要调整，它只是一个带有SVG的图像（没有精灵）和0个CSS。问题只出现在Firefox浏览器中。 - Jorge Guerola

是的Jozsi，那就应该是这样，只重复一次。 - Jorge Guerola

但是根据你发布的图片，我只能看到它出现了一次。 - Jozsi

我只看到了一张图片。我需要特殊的眼镜才能看到另一张吗？ :) - helderdarocha

Answer 1

我将解释这个奇怪的案例...

这是我的SVG代码

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" width="21.391px" height="18.881px" viewBox="228.645 224.748 21.391 18.881" enable-background="new 228.645 224.748 21.391 18.881" xml:space="preserve" xmlns:xml="http://www.w3.org/XML/1998/namespace">
<g>
    <path fill="#CEE4C4" d="M243.708,230.977c-3.494,0-6.328,2.83-6.328,6.323c0,3.494,2.834,6.328,6.328,6.328   c3.496,0,6.328-2.834,6.328-6.326C250.036,233.808,247.204,230.977,243.708,230.977z M244.437,242.177h-1.508v-1.805h1.508V242.177   z M244.308,239.066h-1.24l-0.129-5.723h1.498L244.308,239.066z"/>
    <g>
        <path fill="#9FAEB1" d="M237.384,237.376c0-0.024-0.004-0.051-0.004-0.076c0-0.627,0.096-1.229,0.266-1.803l-3,2.25v-3h-4v-8h12    v4.324c0.347-0.059,0.699-0.096,1.062-0.096c0.318,0,0.63,0.031,0.938,0.076v-6.305h-16v12h4v4L237.384,237.376z"/>
    </g>
</g>
</svg>

SVG元素的尺寸为21x19像素。

但是！SVG元素内部的尺寸为22x20像素。

因此，如果我使用SVG的尺寸（21x19），这并不能解决初始问题，然而如果我使用元素的宽度和高度（22x20），就可以解决问题。

- Jorge Guerola

Answer 2

好的，我现在明白你的问题了。你应该尝试给img标签添加与所添加的图像完全相同的宽度和高度，以确保它显示期望的尺寸。尝试一下，看看会发生什么，如果不行，请创建一个jsfiddle以便我们可以帮助你。

- Jozsi

---

那个可行，但有点奇怪，请检查我的答案。 :) - Jorge Guerola