CODEWITHSUNDEEP
csssvgscaling
spyfx
spyfx

Reputation: 1351

Scale a svg path without scaling its fill pattern

What I am trying to do is to scale my svg path with CSS by just setting the height+width of the whole svg as well as making use of the CSS property transform on the svg's <g> tag.
In the first place everything looked kinda simple and logical, because I'm just having a pattern with a single reference to my patter image -which should be repeated as many times to fill my whole shape. I need more or less the same effect of the CSS property background-repeat: repeat; within my shape.

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <defs>
        <pattern id="Pattern" x="0" y="0" width="149" height="151" patternUnits="userSpaceOnUse">
            <image xlink:href="bg.jpg" x="0" y="0" width="149" height="151" />
        </pattern>
    </defs>
    <g>
        <path fill="url(#Pattern)" d="M15.83,262c1.531-1.814,2.579-3.021,5.029-5.861c22.052-25.553,84.151-110.104,94.935-122.23
        C88.973,92.133,48.727,34.085,32.509,16.395C26.863,9.311,16.216,4.047,6.333,4.047h86.315c-11.26,0-11.265,13.729-2.829,26.479
        l49.855,76.479l19.734-25.592l8.506-11.031c0,0-0.006,14.736-0.006,34.438c-0.701,0.935-7.822,10.457-8.519,11.315
        c-2.872,3.544-5.229,6.468-6.915,8.573c5.24,7.763,10.384,15.356,15.486,22.813c-0.053,34.541-0.031,68.4-0.031,68.4
        l-40.155-64.326c-8.353,12.002-51.124,69.823-68.554,93.937c-2.54,3.515-7.209,10.228-7.438,10.567
        c-1.626,2.441-2.108,3.094-3.922,5.899L15.83,262L15.83,262z"/>
    </g>
</svg>

Upvotes: 1

Views: 1290

Answers (1)

Michael Mullany
Michael Mullany

Reputation: 31715

SVG patterns (and filters) don't work like CSS's background-repeat, so what you want to do is not possible using SVG. You can't have an implicitly sized viewBox and SVG element AND have fixed size pattern elements: pattern elements will be sized in viewBox units by default.

That said, there are hacky ways to get what you want to do if you're not doing something complex. For example, you can set background-repeat: repeat on the entire SVG element, and then use a filter to paint over the area outside your shape so it looks like its filled. But yeeesh...

Upvotes: 3

Related Questions