CSS가있는 SVG 스프라이트 background-size : 100 % auto;

안녕하세요.CSS가있는 SVG 스프라이트 background-size : 100 % auto;

현재 웹 사이트를 구축 중이며 아이콘 글꼴에서 순수 svg 아이콘으로 전환하고 싶습니다. 그것은 축소되는 배경

.icon { 
    width: 1em; 
    height: 1em; 
    background-image: url('path/to.svg'); 
    background-position: 0 0; 
    background-size: 100% auto; 
}

내 호버 효과 (아래)에 가벼운 부상을 입에 배치됩니다 같이 : (높이 비율을 3 폭 1) 내 SVG 스프라이트를 사용하려고하면

문제

입니다.

.icon:hover, 
.icon:focus { 
    background-position: 0 -1em; 
}

높이가 1 : 2 인 스프라이트가있을 때 제대로 작동합니다.

제안 사항?

감사합니다. Sebastian.

출처

2014-03-13 osynligsebastian

당신은 바이올린을 게시 할 수 있습니까? –

현재 프로젝트를 로컬로 보유하고 있지 않습니다. 나는 내일 1 게시 할 것입니다. @TilwinJoy – osynligsebastian

귀하의 svg에는 viewBox 및 "슬라이스"preserveAspectRatio 속성이 있습니까? 그렇지 않으면 아이콘 모양 안에 맞게 크기가 조정됩니다. 또는 1 : 2 스프라이트 시트에서 작동하고 있기 때문에 새 이미지에 대한 viewBox를 업데이트하는 것을 잊었습니까? 코드를 보지 않고 모든 추측. – AmeliaBR

preserveAspectRatio="xMinYMin slice"

이 코드는이를 해결했습니다. AmeliaBR에게 감사드립니다.

편집 :

당신이 당신의 SVG 파일을 내보낼 '반응'의 선택을 취소하는 것을 잊지 어도비 일러스트 레이터를 사용하는 경우. 그렇지 않으면 스프라이트가 Internet Explorer에서 의도 한대로 작동하지 않습니다.

출처

2014-03-14 07:35:11 osynligsebastian

다음은 MDN에 대한 추가 설명입니다. https://developer.mozilla.org/de/docs/Web/SVG/Attribute/preserveAspectRatio –

CSS가있는 SVG 스프라이트 background-size : 100 % auto;

답변

관련 문제