11
SVG 스프라이트 시트를 여기에서 자세히 설명하는 "기호"방법을 사용하려고합니다.height : auto on SVG가 작동하지 않습니다.
http://css-tricks.com/svg-sprites-use-better-icon-fonts/
내 HTML은 매우 간단합니다.
<svg><use xlink:href="/images/iconSprite.svg#camera"/></svg>
그리고 여기에는 SVG 파일에 들어있는 예제 상징이다
<symbol viewBox="0 0 24 24" id="clock"><g transform="translate(0 -1028.4)"><path d="M22.085 1035.955a10.997 10.997-23.5 1 1-20.17 8.77 10.997 10.997-23.5 1 1 20.17-8.77z" fill="#1abc9c"/><path d="M21 1040.335a9 9 0 1 1-18 0 9 9 0 1 1 18 0z" fill="#ecf0f1"/><path d="M1.034 1039.8c-.083 1.7.176 3.3.875 4.9 2.42 5.6 8.898 8.2 14.468 5.8 4.29-1.9 6.778-6.2 6.593-10.6-.202 4-2.63 7.8-6.592 9.6-5.57 2.4-12.047-.2-14.47-5.8-.556-1.2-.82-2.6-.874-3.9z" fill="#16a085"/><path d="M20 1040.4c0 .5-.448 1-1 1h-6v-2h6c.552 0 1 .4 1 1z" fill="#3498db"/><path d="M12 1033.4c-.552 0-1 .448-1 1v5h2v-5c0-.552-.448-1-1-1z" fill="#2c3e50"/><path fill="#c0392b" d="M6.017 1045.705l4.95-4.95.707.707-4.95 4.95z"/><path d="M12 1038.4c-1.105 0-2 .9-2 2s.895 2 2 2 2-.9 2-2-.895-2-2-2zm0 1c.552 0 1 .4 1 1 0 .5-.448 1-1 1s-1-.5-1-1c0-.6.448-1 1-1z" fill="#34495e"/></g></symbol>
오전 데 문제는 내가 SVG의 높이를 64px하기 위해 SVG 요소의 폭을 설정하기 위해 CSS를 사용할 때 자동으로 150 픽셀로 설정됩니다. 나는 높이 설정을 시도했다 : 자동; 높이 : 100 %; SVG 요소에 대해서는 아무런 차이가 없습니다. 작동 시키려면 높이를 설정하는 것이 유일한 방법입니다 : 64px; 내 아이콘의 종횡비가 항상 정사각형이 아니기 때문에 나는 원하지 않습니다. 내가 원했던 것은 원래의 종횡비로 SVG의 크기를 자동으로 조절하는 것이므로, 너비를 400px로 설정하면 4 : 3 아이콘 (보기 상자에서 정의)은 자동으로 300px 높이가됩니다.
내가 SVG 스케일링 및 종횡비 보존에 대한 몇 가지 지침을 읽었으며 일부는 IMG 요소를 사용할 때 솔루션을 가지고 있지만 인라인 SVGS 또는 USE와 함께 외부 SVG를 찾을 수는 없습니다.
누구나 IE9 이상 및 Android 4.0 이상을 포함한 모든 브라우저에서 작동하는 솔루션을 알고 계십니까?