How to make an SVG image template move using an object?

Question

I have some SVG objects with a tiled image background using fill="url(#background) , where I define #background as a pattern containing only image .

However, when an object moves through the settings, its x / y attributes (or cx / cy or something else determines the offset), the background does not move with it.

How do I make a background move? From How to transfer an SVG template using an element I tried to set patternContentUnits='objectBoundingBox' , but it just turns the image into a solid color drop (oddly enough, though color according to the image, as if it were only the first pixel or some).

Here is a jsfiddle example that illustrates all of this: the top rect was turned solid, and then the bottom rect has a background image, but it doesn't move with rect :

http://jsfiddle.net/x8nkz/17/

I know that if you used transform="translate(...)" instead of setting the x / y attributes, the background is also translated, but the existing code base I work in does not use translation for positioning (and this would leave other unforeseen consequences for the rest of the application).

Thanks in advance for your help.

Answer 1

I really ran into the same problem and found a solution. I unfolded your fiddle to show the changes. Basically, you remove the patternContentUnits attribute since it does not help here and updates the x attribute of the image so that it matches the direct object after each update.

http://jsfiddle.net/RteBM/2/

Updated HTML:

 <svg xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" width="100%" height="100%"> <title>basic pattern</title> <defs> <pattern id="pat1" width="179" height="132" patternUnits="userSpaceOnUse"> <image x="0" y="0" width="179" height="132" xlink:href="http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/honey_im_subtle.png"></image> </pattern> <pattern id="pat2" width="179" height="132" patternUnits="userSpaceOnUse"> <image x="0" y="0" width="179" height="132" xlink:href="http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/honey_im_subtle.png"></image> </pattern> </defs> <rect id="rect1" x="0" y="0" width="179" height="132" fill="url(#pat1)"/> <rect id="rect2" x="0" y="150" width="179" height="132" fill="url(#pat2)"/> </svg> 

Updated JS:

 var i = 0; var newX; setInterval( function(){ $('rect').attr('x', Math.sin(i+=.01)*100+100); $('#pat1').attr('x', $("#rect1").attr('x')); }, 100); 

Answer 2

If you use objectBoundingBox units, then width 1 (or 100%) will be the width of the object, so 178 will be 178 times larger. You probably want

 <pattern id="pat1" width="179" height="132" patternUnits="userSpaceOnUse" patternContentUnits="objectBoundingBox"> <image width="1" height="1" xlink:href="http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/honey_im_subtle.png"></image> </pattern> 

This will not make the template move. For this you need a transformation. If you cannot put it on a <rect> , perhaps you can make the rect of the child <g> and transform the <g> .

Answer 3

Try setting the value of patternUnits to "objectBoundingBox".