요소 img와 SVG Firefox

다른 브라우저에서 모든 svg의 이미지를 호환 가능하게하려고합니다. Firefox에 문제가 있습니다.요소 img와 SVG Firefox

요소 img에서 .SVG 이미지를 사용하고 있습니다. 다음과 같이하면 :

<img src="image.svg" />

아래 이미지가 보이면 SVG가 반복 된 것처럼 보입니다. svg를 배경 이미지로 사용한다면 배경 반복 : no-repeat을 할 수 있습니다. 그러나이 경우 img 요소에 svg를 사용해야하고 img 요소에 background-repeat를 지정할 수 없습니다.

어떻게 해결할 수 있습니까? 모든 대답은 apreciate됩니다.

enter image description here

출처

2014-04-17 Jorge Guerola

이미지는 어떻게 반복됩니까? 이것은 스프라이트 SVG입니까? JSfiddle을 실제 이미지로 만들 수 있습니까? –

나는 왜 반복되는지 모른다. 바이올린이 필요없고, 그저 svg (그리고 스프라이트가없는) 이미지와 0 css 만 있습니다. 문제는 단지 firefox입니다. –

문제를 재현 할 수 없거나 질문을받지 못할 수도 있습니다. 그 img를 되풀이하고 싶습니까? 이 과 같은 간단한 img를 포함하면 이미지가 한 번 표시됩니다. – Jozsi

나는이 이상한 경우를 explane거야 도움을 줄 수 할 수 있도록하시기 바랍니다하지 않을 경우

이

내 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)의 너비와 높이를 넣으면 문제가 해결됩니다.

출처

2014-04-17 13:40:38

가 좋아 난 당신의 문제는 지금 무엇을 참조하십시오. img 태그를 추가하려고하면 이미지의 정확한 폭과 높이가 예상 된 치수를 표시하는지 확인하기 위해 추가해야합니다. jsfiddle 당신에게

출처

2014-04-17 13:18:13 Jozsi

그게 효과가 있었지만 이상하게 들렸습니다. 내 대답을 확인하십시오. :) –

나는 당신이 문제를 해결해 준 것을 기쁘게 생각한다. :) – Jozsi

요소 img와 SVG Firefox

답변

관련 문제