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

Question

I want to add a repeating background image to a svg rect element that is using a clip-path. The svg file must have a viewbox attribute.

See the fiddle (http://jsfiddle.net/tbbtester/ES9cB/2/) - I want the triangle to have a background that looks similar to the rectangle - they are using the same image for background, why do they look so 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);}

Answer 1

There isn't any way to make the pattern not scale along with the SVG. It is affected by the viewBox and preserveAspectRatio settings the same as everything else.

If you knew in advance what the scaling was going to be, you could apply the inverse of the transform in the patternTransform attribute. Otherwise, you are out of luck,.