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

It's hard to tell what these are supposed to look like because your domain (svgtest.tbb.dev.novicell.dk) seems to be unreachable at the moment. — Paul LeBeau, Jun 23 '14 at 10:57
@BigBadaboom has been fixed, domain is now available from the outside world! — user3755716, Jun 23 '14 at 12:27

score 0 · Accepted Answer · answered Jun 23 '14 at 15:54

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,.

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

1 Answers1