javascript - SVG画像パターンの塗りつぶしをオブジェクトで動かす方法は?

Question

fill="url(#background)を使用してタイル画像の背景を持つ SVG オブジェクトがいくつか#backgroundありpatternますimage。

ただし、x/y属性 (またはcx/ cy、またはその他のオフセットを定義するもの) を設定してオブジェクトを再配置すると、背景は一緒に移動しません。

背景も動かすにはどうすればいいですか？設定しようとした要素でSVGパターンをどのように移動するかからpatternContentUnits='objectBoundingBox'、画像を単色のブロブに変えるだけです（奇妙なことに、画像に応じて色付けされ、最初のピクセルなどであるかのように） .

これは、これらすべてを説明する jsfiddle です。上部rectは単色に変わり、下部rectには背景画像がありますが、それは動きませんrect:

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

/属性transform="translate(...)"を設定する代わりに使用していた場合、背景も変換されることはわかっていますが、私が作業している既存のコードベースは配置に変換を使用していません (そして、残りの部分に他の意図しない結果が生じるでしょう)。アプリケーション）。xy

助けてくれてありがとう。

Answer 1

私は実際に同じ問題に遭遇し、解決策を見つけました。変更を表示するためにあなたのフィドルをフォークしました。基本的に、ここでは役に立たないので patternContentUnits 属性を削除し、各更新後に画像の x 属性を rect オブジェクトの属性と一致するように更新します。

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

Answer 2

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>、rect を要素の子にして、代わりに<g>要素を変換できます。<g>

Answer 3

patternUnits の値を「objectBoundingBox」に設定してみてください。