Html 元素img与SVG-Firefox
试图在不同的浏览器中兼容所有svg的图像,我对Firefox有一个问题 我在元素img中使用.SVG图像。诸如此类:Html 元素img与SVG-Firefox,html,css,image,firefox,svg,Html,Css,Image,Firefox,Svg,试图在不同的浏览器中兼容所有svg的图像,我对Firefox有一个问题 我在元素img中使用.SVG图像。诸如此类: <img src="image.svg" /> 如果您可以看到下图,那么SVG似乎是重复的。如果我将svg用作背景图像,很可能我可以进行背景重复:不重复,但在这种情况下,我需要在img元素上使用svg,并且不能为img元素指定背景重复 我怎样才能解决这个问题?所有答案都将是非常宝贵的 好的,我知道你现在有什么问题了。您应该尝试为img标签添加您尝试添加的图像的确
<img src="image.svg" />
如果您可以看到下图,那么SVG似乎是重复的。如果我将svg用作背景图像,很可能我可以进行背景重复:不重复,但在这种情况下,我需要在img元素上使用svg,并且不能为img元素指定背景重复
我怎样才能解决这个问题?所有答案都将是非常宝贵的
好的,我知道你现在有什么问题了。您应该尝试为img标签添加您尝试添加的图像的确切宽度和高度,以确保它将显示预期的尺寸。试试看会发生什么,如果没有,请做一个jsfiddle来帮助你我将解释这个奇怪的案例 这是我的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 px。
但是SVG内部元素的测量值为22x20 px
因此,如果我使用svg(21x19)的度量值来解决最初的问题,但是如果我使用元素的宽度和高度(22x20)来解决问题。图像是如何重复的?这是雪碧SVG吗?你能不能把实际的图像做一个JSFIDLE?我不知道为什么会重复。不需要小提琴,它只是一个带有svg(没有精灵)和0 css的图像。问题只是一个Firefox,我无法重现你的问题,或者我就是不明白你的问题。你想重复那个img吗?如果你包括这样一个简单的img,它应该一次显示你的图像,但正如我在你发布的图像上所看到的那样,它一次只显示一张图像。我需要特殊的眼镜才能看到另一个吗?:)这很有效,但有点奇怪,请检查我的答案。:)