html - Repeating background image on a svg rect element that is using clip-path -

html - Repeating background image on a svg rect element that is using clip-path -

i want add together repeating background image svg rect element using clip-path. svg file must have viewbox attribute.

see fiddle (http://jsfiddle.net/tbbtester/es9cb/2/) - want triangle have background looks similar rectangle - using same image background, why different?

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);}

there isn't way create pattern not scale along svg. affected viewbox , preserveaspectratio settings same else.

if knew in advance scaling going be, apply inverse of transform in patterntransform attribute. otherwise, out of luck,.

html css svg viewbox