크로스 브라우저 호환 SVG 크기 조정

SVG 스프라이트를 처음 사용했지만 SVG 스프라이트의 트리 하우스 비디오를보고 난 후에도 사용하고 있습니다. 나는 그들이 SVG의 배경 이미지와 링크에 대한 비디오에서와 동일한 서식을 사용하고있어, 즉, 스프라이트에서 가져온 :크로스 브라우저 호환 SVG 크기 조정

<a href="whatever" class="helpmepls"></a>

스타일은 여기서

.helpmepls { 
    background: url("sprite.svg") no-repeat; 
    height: 32px; 
    width: 32px; 
    background-position: -32px -128px; 
    -webkit-transform: scale(2.0); 
    -ms-transform: scale(2.0); 
    -o-transform: scale(2.0); 
    transform: scale(2.0); 
    text-indent: 100%; 
    white-space: nowrap; 
    overflow: hidden; 
}

그러나 때마다 1.0보다 큰 이미지의 크기를 조정하면 Chrome에서 잘 보일지라도 가장자리에서 픽셀 화 (아마 IE, 확인하지 않음)됩니다. 브라우저와 호환되는 방법에 대한 도움말? 컨테이너, svg 요소, 뷰 요소, 뷰 박스 또는 그 조합을 사용해야합니까?

출처

2016-09-20 Kevin Banas

@sohaib - SVG 글자를 대문자로 사용하는 문구를 편집 해 주셔서 감사합니다. 질문의 실제 내용과 관련하여 제안 된 해결책이 있습니까? –

내 대답은 [여기] (http://stackoverflow.com/questions/39601958/svg-sizing-thats-cross-browser-compatible/39619698#39619698) 잘 진행되면 알려주세요! –

여기에 Demo! Here에서 다운로드 할 수 있습니다.

My workflow

당신은 JS 선 scaleValue 1의 값을 변경하여 스케일링을 제어 할 수있다.

var scaleValue = 1.2;

나는 보통 애니메이션을 만들기 위해 "인라인"SVG와 GreenSock 라이브러리를 사용!

출처

2016-09-21 14:40:43

글쎄! 이것 좀보세요 : https://jsfiddle.net/uw1wL9tf/ –

스케일링에'transform : scale (1.3); '을 사용했습니다! –

예 변형 : 축척 (1.3); 내가 현재 사용하고있는 것이 에지에서 흐릿하게 보입니다. 나는 이것을 태그의 배경 이미지로 사용하고 있습니다. 나는이 기사에서 내가 찾고있는 대답을 가지고 있다고 생각하지만 구현 방법을 이해하지 못한다. 나를! 그래서 나는 그것을 공부할 것이다. 감사! –

크로스 브라우저 호환 SVG 크기 조정

답변

관련 문제