preserveAspectRatio SVG의 패턴 이미지와 CSS 배경 이미지 커버

나는 두 개의 삼각형을 대각선으로 배치하여 직사각형을 만드는 SVG가 있습니다. 이 사각형은 브라우저 창의 너비와 높이가 100 %입니다. 하나의 배경 이미지로 각각을 채우려고합니다. 이를 위해 이미지를 패턴에 넣고 각 삼각형에 그 패턴을 채 웁니다. 그러나 패턴의 이미지는 윈도우 크기 조정시 비율을 유지하지 않습니다. 이미지가 늘어나고 왜곡됩니다. 나는 이미지가이 CSS가 어떻게 작동하는지와 비슷한 역할을 할 :preserveAspectRatio SVG의 패턴 이미지와 CSS 배경 이미지 커버

<svg viewBox="0 0 25 25" preserveAspectRatio="none" width="100%" height="100%"> 
    <defs> 
     <pattern id="pattern3" height="100%" width="100%" 
     patternContentUnits="objectBoundingBox" viewBox="0 0 1 1" 
     preserveAspectRatio="xMidYMid slice"> 
      <image height="1" width="1" preserveAspectRatio="xMidYMid slice" 
       xlink:href="img/1.JPG" /> 
     </pattern> 
    </defs> 
    <polyline points="0,0 25,0 0,25" 
     fill="url(#pattern3)" id="top"/> 
    <polyline points="25,0 25,25 0,25" 
     fill="url(#pattern3)" id="bottom"/> 
</svg>

이 저를 도와주세요 :

background: url(images/bg.jpg) no-repeat center center fixed; 
-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover;

이 내가 SVG에 대한 지금까지 가지고있는 코드입니다!

출처

2014-06-17 priyanka

루트 SVG의 preserveAspectRatio 속성을 다른 것으로 변경하여이 문제를 해결할 수 있습니다. 예를 들어 :

<svg viewBox="0 0 25 25" preserveAspectRatio="xMidYMid slice" 
    width="100%" height="100%">

Demo here

출처

2014-06-17 12:13:38

루트 SVG의 화면 비율을 변경하지 않고이 작업을 수행 할 수 어쨌든 있나요? 삼각형을 위와 아래에서 잘라 내고 싶지는 않습니다. 나는 그것들을 화면 전체에 걸쳐 놓기를 원합니다. – priyanka

루트 svg 요소에서'preserveAspectRatio = "none"'을 사용하면 항상 내용이 늘어나거나 압축됩니다. 내부 내용이이를 덮어 쓸 방법이 없습니다. 유일한 해결책은 Javascript를 사용하여 삼각형의 크기를 설정하는 것입니다. –

이미지가 늘어나고 (비례하여) 코드의 크기가 창 크기가 커집니다. 훨씬 더 직관적 인 배경 표지처럼 행동하고 창 크기가 커지면 배경 이미지를 엄청나게 크게 늘리지 않고 대신 이미지를 움직여 주변을 감싸고 싶습니다. 그 일을 어떻게 하죠? – priyanka

preserveAspectRatio SVG의 패턴 이미지와 CSS 배경 이미지 커버

답변

관련 문제