인라인 svg 크기 조정 - 자동 너비

반응 형 대시 보드를 만들었으며 새로운 요구 사항은 큰 화면의 TV 시청입니다. 로고 애셋의 크기 조정을 수행하기 위해 SVG를 사용하기로 결정했으며 모바일/데스크톱보기를 위해 별도의 망막 스프라이트를 유지할 필요가 없습니다.인라인 svg 크기 조정 - 자동 너비

로고의 너비가 모두 다르기 때문에 너비가 자동 인 일반적인 높이를 설정해야합니다. 이것은 img 태그와 함께 svg를 사용할 때 훌륭하게 작동하지만 인라인 SVG를 사용할 때 경로의 크기는 좋지만 svg 너비는 여전히 viewBox 크기로 설정됩니다.

필요하면 img 옵션을 사용할 수 있지만 인라인 옵션을 사용하는 편이 좋을 수 있으므로 CSS를 사용하여 경로의 색상을 제어 할 수 있습니다.

예제를 보여주기 위해 jsfiddle을 설정했습니다. 빨간색 keyline은 두 요소에 대한 크기 조정 문제를 보여줍니다. 당신의 도움에 대한 http://jsfiddle.net/bxeBW/2/

<svg version="1.1" id="DT" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
    width="445.997px" height="100px" viewBox="0 0 445.997 100" preserveAspectRatio="xMinYMin meet"> 

.logo{ 
    height:3em; 
    padding: 0.5em; 

    svg, 
    img{ 
     height:3em; 
     width:auto; 
     border: 1px solid #ff0000; 

     #telegraph{ 
      fill:#ff0000; 
     } 
    } 
}

감사합니다.

건배, 댄

출처

2014-06-11 Dan

시도 및 로고 클래스에 display: flex; 속성을 추가 할 수 있습니다. 바이올린이 도움이 될 것입니다 – fauverism

감사합니다 @fauverism. 불행하게도 그것은 효과가 없었습니다. 위의 게시 본문에는 바이올린 링크가 있습니다. – Dan

그것은는 SVG에 대한 CSS에 최대 폭을 추가하여, 내가 그것을 필요로 정확히 크기 포맷합니다 나타납니다. 다행스럽게도 필자의 요구 사항을 충족시키는 Webkit 브라우저 및 Firefox에서 작동하지만, IE 지원이 필수적이라면 이는 실제로 해결책이 아닙니다.

.logo{ 
    svg, 
    img{ 
     height:3em; 
     max-width:100%; 
    } 
}

http://jsfiddle.net/bxeBW/3/

출처

2014-06-11 11:13:02 Dan

인라인 svg 크기 조정 - 자동 너비

답변

관련 문제