带有 SVG Firefox 的元素 img答案

【问题标题】：element img with SVG Firefox带有 SVG Firefox 的元素 img
【发布时间】：2014-06-01 16:58:02
【问题描述】：

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

我在元素 img 中使用 .SVG 图像。类似的东西：

<img src="image.svg" />

如果你能看到下面的图像，似乎 SVG 是重复的。如果我将 svg 用作背景图像，我可能会做 background-repeat: no-repeat，但在这种情况下，我需要在 img 元素处使用 svg 并且不能将背景重复指定给元素 img。

我该如何解决这个问题？所有答案都将不胜感激。

【问题讨论】：

图像是如何重复的？这是精灵 SVG 吗？你能用实际的图像制作一个 JSfiddle 吗？
不知道为什么会重复。不需要小提琴，它只是一个带有 svg （并且没有 sprite ）和 0 css 的图像。问题只是一个firefox
我无法重现您的问题，或者我只是不明白您的问题。你想让那个img重复吗？如果你包含一个像这样的简单img 它应该显示你的图像一次
但正如我在您发布的图片上看到的那样，它只出现了一次
我只看到一张图片。我需要任何特殊的眼镜才能看到另一副吗？ :)

标签： html css image firefox svg

【解决方案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) 来解决问题。

【讨论】：

【解决方案2】：

好的，我知道你现在有什么问题了。您应该尝试为 img 标签添加您尝试添加的图像的确切宽度和高度，以确保它显示预期的尺寸。尝试一下，看看会发生什么，如果没有，请制作一个 jsfiddle 来帮助您

【讨论】：

这行得通，但有点奇怪，请检查我的答案。 :)