CODEWITHSUNDEEP
svgsvg-filters
Shadaez
Shadaez

Reputation: 412

How can I line up these tiles applied via SVG-filter?

I'm trying to get a tiled image to show up in a filter and tile correctly with anything else it's applied on, no matter where the other items are drawn, AKA the tiled image should be globally fixed somehow.

svg replicating issue (i know you'd probably use a pattern fill to do this normally its just to replicate the issue I'm having):

<svg width="700" height="700">
  <defs>
    <filter width="1" height="1" id="stripe">
        <feImage xlink:href="http://i.imgur.com/T5fsm0U.png" height="160" width="80" result="patternimage"></feImage>
        <feTile in="patternimage"></feTile>
    </filter>
  </defs>
  <rect x="0" y="0" width="300" height="400" filter="url(#stripe)"></rect>
  <rect x="160" y="10" width="300" height="400" filter="url(#stripe)"></rect>
  <rect x="200" y="0" width="200" height="200" filter="url(#stripe)"></rect>
</svg>

codepen: http://codepen.io/anon/pen/iEkmL

I don't care if a pattern is used instead of feTile, as long as its output is usable as a filter step. I feel like the answer has something to do with filterUnits or primitiveUnits but I don't really understand how to use them to solve the issue.

Upvotes: 0

Views: 163

Answers (1)

Paul LeBeau
Paul LeBeau

Reputation: 101918

I'm not sure you can do this with filters. FIlters are more-or-less relative to the element they are applied to. If you try to plot the image in "global" (user) space, it may not be visible in the primitive filter subregion and won't get tiled.

You can do this with patterns though. You just need to use patternUnits="userSpaceOnUse".

http://codepen.io/anon/pen/Brcox

You can then use the patterned fill as the input to a filter, if that's what you need to do.

Upvotes: 1

Related Questions