클립 경로를 사용하는 svg rect 요소에 반복되는 배경 이미지

클립 경로를 사용하는 svg rect 요소에 반복되는 배경 이미지를 추가하고 싶습니다. svg 파일에는 viewbox 속성이 있어야합니다.클립 경로를 사용하는 svg rect 요소에 반복되는 배경 이미지

피들보기 (http://jsfiddle.net/tbbtester/ES9cB/2/) - 삼각형에 사각형과 비슷한 배경이 있기를 원합니다. 배경에 대해 동일한 이미지를 사용하고 있는데, 왜 그렇게 다른 것처럼 보입니까?

HTML :

<p></p> 
<div class="section-top"> 
    <div> 
    <svg viewBox='0 0 100 50' preserveAspectRatio="none"> 
     <rect x="0" y="0" height="50" width="100" /> 

     <defs><clipPath id="section2a"><polygon points='0,0 100,5 100,50 '/></clipPath> 
     <pattern patternUnits="userSpaceOnUse" id="pat1" x="0" y="0" width="1px" height="1px"> 
      <image width="1px" height="1px" xlink:href="http://svgtest.tbb.dev.novicell.dk/bg.png" /> 
     </pattern> 
     </defs> 
     </svg> 
    </div> 
</div>

CSS :

.section-top{position:absolute;width:100%;top:250px;} 
.section-top div{height:0;position: relative;padding-top:50%;} 
svg{height: 100%;display:block;width: 100%;position: absolute;top:0;left:0;} 
rect{stroke:none;fill:url(#pat1);clip-path: url(#section2a);} 
p{height:200px;background: url(http://svgtest.tbb.dev.novicell.dk/bg.png);}

출처

2014-06-23 user3755716

도메인 (svgtest.tbb.dev.novicell.dk)이 현재 도달 할 수없는 것처럼 보이기 때문에 어떤 모양인지 알기 어렵습니다. –

@BigBadaboom이 수정되었습니다. 이제 외부 세계에서 도메인을 사용할 수 있습니다! – user3755716

패턴이 SVG와 함께 확장되지 만들 수있는 방법이 없습니다. 다른 모든 것과 마찬가지로 viewBox 및 preserveAspectRatio 설정의 영향을받습니다.

스케일링이 무엇을 할 것인지 미리 아는 경우 patternTransform 속성에 변환의 역수를 적용 할 수 있습니다. 그렇지 않으면, 당신은 운이 없다.

출처

2014-06-23 15:54:49

클립 경로를 사용하는 svg rect 요소에 반복되는 배경 이미지

답변

관련 문제