オブジェクトを使ってSVGイメージパターンを塗りつぶす方法は？

Question

私はfill="url(#background)を使って、タイル張りの画像の背景を持つSVGオブジェクトをいくつか持っています。ここでは、#backgroundをとして定義しています。imageです。オブジェクトが設定そのx/y属性（またはcx/cy、または任意の他のオフセットを定義する）により再配置されたときに

しかし、背景はそれと一緒に移動しません。

バックグラウンドの移動方法を教えてください。 How would I move an SVG pattern with an elementから私はpatternContentUnits='objectBoundingBox'を設定しようとしましたが、イメージを単色のブロブに変えてしまいました（奇妙なことに、最初のピクセルかそうであるかのようにイメージに応じて色づけされています）。

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

：トップ rectは無地になって、[底された rectは背景画像を有しているが、それは rectと動かない - ここ

は、このすべてを示すjsfiddleあります

x/yの属性を設定する代わりにtransform="translate(...)"を使用していた場合、背景はとなります。も翻訳されますが、現在作業している既存のコードベースでは位置合わせに翻訳が使用されません国連アプリケーションの残りの部分で意図された結果）。

ご協力いただきありがとうございます。

Answer 1

objectBoundingBoxユニットを使用する場合は、幅1（または100％）がオブジェクトの幅になるため、178はオブジェクトの178倍になります。可能性があります

<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> 

これはパターンを移動させません。あなたはそれをするために何らかの変換を必要とするでしょう。 <rect>に置くことができない場合は、<g>要素の子要素をrectにして、代わりに<g>要素を変換します。

Answer 2

patternUnitsの値を "objectBoundingBox"に設定しようとします。

Answer 3

実際に同じ問題が発生し、解決策が見つかりました。私はあなたのフィドルを変えて表示しました。基本的には、patternContentUnits属性はここでは役に立たないので削除し、各更新後にrectオブジェクトの属性と一致するように画像の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：私はちょうどjsfiddleでこれを試してみた

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