보존 비율로 배경 이미지로 반응 형 svg 채우기

내 HTML 코드에 svg를 그려서 배경 이미지가있는 특정 경로/개체를 갖도록 시도합니다. 개체는 (부트 스트랩을 사용하여) 조금 반응해야하지만 이미지로 채워야하며 이미지는 비율을 유지해야합니다.보존 비율로 배경 이미지로 반응 형 svg 채우기

<svg width="100%" height="370px" viewBox="0 0 1148.942 598.47" preserveAspectRatio="none" > 
    <defs> 
     <pattern id="img1" patternUnits="userSpaceOnUse" width="1153" height="680"> 
     <image xlink:href="images/headerBackground.png" x="0" y="0" width="1153" height="680" /> 
     </pattern> 
    </defs> 
     <path fill="url(#img1)" d="M1145.237,3.395H3.379v592c0,0,247.108-160.416,1141-99L1145.237,3.395z"/> 
    </svg>

당신은 라이브 데모에 여기를 볼 수 있습니다 ~~https://liveweave.com/N5nib6~~ https://jsfiddle.net/zyyvd86g/

어쩌면 아무도 도와 드릴까요? 나는 그 문제가 충분히 분명하기를 희망한다.

출처

2017-11-02 Rene

에 오신 것을 환영합니다. 라이브 웨이브 데모가 귀하의 질문과 일치하지 않습니다. 제발 그걸 고칠 수 있을까요? –

링크가 변경되었습니다. 왜 예상대로 작동하지 않는지 나는 모른다. 내 컴퓨터에서 올바른 버전을 볼 수 있지만 내 스마트 폰에서는 볼 수 없습니다. – Rene

svg 요소에는 max-width : 100 %를 사용할 수 있으며이 svg에는 div 요소를 사용할 수 있습니다. 당신은 응답 이미지

div { 
 
    width: 80%; 
 
    height: auto; 
 
    margin: 0 auto; 
 
} 
 
svg { 
 
    max-width: 100%; 
 
    height: auto; 
 
}

<div> 
 
\t <svg width="100%" height="370px" viewBox="0 0 1148.942 598.47" preserveAspectRatio="none" > 
 
    <defs> 
 
     <pattern id="img1" patternUnits="userSpaceOnUse" width="1153" height="680"> 
 
     <image xlink:href="images/headerBackground.png" x="0" y="0" width="1153" height="680" /> 
 
     </pattern> 
 
    </defs> 
 
     <path fill="url(#img1)" d="M1145.237,3.395H3.379v592c0,0,247.108-160.416,1141-99L1145.237,3.395z"/> 
 
    </svg> 
 
</div>

출처

2017-11-03 05:40:24

에게 IMO 의견을 얻을 수 있습니다, 문제에 대한 간단한 해결 방법은 SVG의 다른 preserveAspectRatio을 사용하는 것입니다.

preserveAspectRatio="none"을 사용하면 SVG가 늘어나서 문제가 발생할 수 있습니다.

경로 맨 아래에 "급습"모양을 유지하려고한다고 가정합니다. 옳은? 이런 경우

대신

preserveAspectRatio="xMidYMax slice"

를 사용하는 것을 선호 할 수도 있습니다. SVG 뷰포트의 전체 너비를 채우도록 가로 세로 비율을 동일하게 유지하면서 및의 SVG viewBox 하단을 화면에 유지하면서 SVG의 크기를 조정합니다. 스택 오버플로

<svg width="100%" height="370px" viewBox="0 0 1148.942 598.47" preserveAspectRatio="xMidYMax slice"> 
 
    <defs> 
 
    <pattern id="img1" patternUnits="userSpaceOnUse" width="1153" height="680"> 
 
\t  <image xlink:href="http://lorempixel.com/1153/680/" x="0" y="0" width="1153" height="680" /> 
 
    </pattern> 
 
    </defs> 
 
    <path fill="url(#img1)" d="M1145.237,3.395H3.379v592c0,0,247.108-160.416,1141-99L1145.237,3.395z"/> 
 
</svg>

출처

2017-11-04 04:42:50

보존 비율로 배경 이미지로 반응 형 svg 채우기

답변

관련 문제