javascript - 如何使SVG图像图案填充随对象移动？

Question

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

但是，当对象通过设置其x/y 属性(或cx/cy ，或任何其他定义偏移量的内容)，背景不会随之移动。

如何让背景也移动？来自 How would I move an SVG pattern with an element我尝试设置 patternContentUnits='objectBoundingBox' 但这只会将图像变成纯色 Blob (不过奇怪的是，根据图像着色，就好像它只是第一个像素或类似的像素).

这是一个说明所有这些的 jsfiddle - 顶部的 rect 已变成纯色，然后底部的 rect 有背景图像，但它没有使用 rect 移动:

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

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

在此先感谢您的帮助。

Answer 1

其实我也遇到过同样的问题，并且找到了解决办法。我已经 fork 了你的 fiddle 来展示这些变化。基本上，您删除 patternContentUnits 属性，因为它在这里没有帮助，并在每次更新后更新图像的 x 属性以匹配矩形对象的属性。

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

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

更新的 JS:

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