javascript - 如何使SVG图像图案填充随对象移动？(How to make SVG image pattern fill move with object?)

Question

I have some SVG objects with a tiled image background using fill="url(#background) , where I'm defining #background as a pattern containing just an image .

(我有一些SVG对象，使用fill="url(#background)来平铺图像背景，其中我将#background定义为仅包含image的pattern 。)

However, when the object is relocated by settings its x / y attributes (or cx / cy , or whatever else defines the offset), the background does not move with it.

(但是，当通过设置对象的x / y属性（或cx / cy或其他定义偏移量）来重定位对象时，背景不会随之移动。)

How do I make the background move as well?

(如何使背景也移动？)

From How would I move an SVG pattern with an element I tried to set the patternContentUnits='objectBoundingBox' but that just turns the image into a solid color blob (oddly, though, colored according to the image, as if it were just the first pixel or some such).

(从如何移动带有元素的SVG模式开始，我尝试设置patternContentUnits='objectBoundingBox'但这只是将图像变成纯色斑点（不过，奇怪的是，根据图像进行了着色，就好像它只是第一个像素等）。)

Here is a jsfiddle illustrating all of this - the top rect has been turned into a solid color, and then bottom rect has the background image but it doesn't move with the rect :

(这是一个说明所有这些的jsfiddle-顶部rect已变成纯色，然后底部rect具有背景图像，但不会随rect移动：)

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

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

I know that if you were using transform="translate(...)" instead of setting the x / y attributes, the background does get translated as well, but the existing codebase I'm working within doesn't use translate for positioning (and it would have other unintended consequences on the rest of the application).

(我知道，如果您使用的是transform="translate(...)"而不是设置x / y属性，那么背景的确也会得到翻译，但是我正在使用的现有代码库不会将translate用于定位（这会对应用程序的其余部分产生其他意想不到的后果）。)

Thanks in advance for any help.

(在此先感谢您的帮助。)

  ask by Yang translate from so

Answer 1

I actually encountered the same problem and found a solution.

(我实际上遇到了同样的问题，并找到了解决方案。)

I've forked your fiddle to show the changes.

(我已经分叉了您的小提琴以显示更改。)

Basically, you remove the patternContentUnits attribute as it doesn't help here and update the x attribute of the image to match that of the rect object after each update.

(基本上，您删除patternContentUnits属性，因为它对这里无济于事，并在每次更新后更新图像的x属性以匹配rect对象的属性。)

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

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

Updated HTML:

(更新的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:

(更新的JS：)

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