.svg 파일을 스프라이트로 사용하고 있지만 작동하지 않습니다.

Question

.png 스프라이트가 있는데 효과가 있었지만 .svg로 전환하면 전체 이미지가 높이 (24px)로 줄어 듭니다. 여기 내 사이트가 있습니다 : http://www.bethalessi.com/ 빈 공간에있는 사이드 바에서 볼 수 있습니다. 내 코드 : 나는 336 픽셀 (파일의 높이)의 높이를 변경하는 경우

ul.social { 
text-align: center; 
margin-top: 4em; 
} 
.social li { 
display: inline-block; 
} 
.social a { 
display: block; 
width: 28px; 
height: 24px; 
background: url(assets/images/social.svg) no-repeat; 
} 

, 그것은 올바른 크기를 표시하지만 각 링크에 대한 이미지를 반복합니다.

.svg 파일을 사용하여 스프라이트를 만드는 방법은 무엇입니까?

Answer 1

SVG를 약간 변경해야합니다. 에서 변경 행 4 :

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
viewBox="0 0 28 336" enable-background="new 0 0 28 336" xml:space="preserve"> 

SVG의 현재 버전

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
width="28" height="336" enable-background="new 0 0 28 336" xml:space="preserve"> 

로는 viewBox 속성으로, 당신은 SVG는 부모 컨테이너에 맞게 조정하려는 브라우저를 알려줍니다. 28x24 상자입니다.

변경된 버전은 SVG를 고정 크기 (28x336)로 만듭니다. 따라서 비트 맵 스프라이트 시트와 유사하게 동작해야합니다.