एसवीजी छवि पैटर्न कैसे ऑब्जेक्ट के साथ स्थानांतरित करने के लिए?

Question

मेरे पास fill="url(#background) का उपयोग करके एक टाइल वाली छवि पृष्ठभूमि के साथ कुछ एसवीजी ऑब्जेक्ट्स हैं, जहां मैं #background को pattern के रूप में परिभाषित कर रहा हूं जिसमें केवल image है।

हालांकि, जब वस्तु सेटिंग्स अपने x/y गुण (या cx/cy, या जो कुछ भी भरपाई निरूपित करता है) से दूसरी जगह है, पृष्ठभूमि इसके साथ नहीं जाते हैं।

मैं पृष्ठभूमि को कैसे स्थानांतरित कर सकता हूं? How would I move an SVG pattern with an element से मैंने patternContentUnits='objectBoundingBox' सेट करने का प्रयास किया, लेकिन यह छवि को एक ठोस रंगीन ब्लॉब में बदल देता है (हालांकि, छवि के अनुसार रंगीन, हालांकि यह केवल पहला पिक्सेल या कुछ ऐसा था)।

यहाँ एक jsfiddle इस सब को दर्शाता हुआ है - शीर्ष rect किसी गहरे रंग में बदल गया है, और फिर नीचे rect पृष्ठभूमि छवि है, लेकिन यह rect साथ नहीं ले:

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

मुझे पता है कि अगर आप का उपयोग x/y विशेषताओं को सेट करने के बजाय करते हैं, तो पृष्ठभूमि का अनुवाद भी किया जाता है, लेकिन मौजूदा कोडबेस जो मैं काम कर रहा हूं वह स्थिति के लिए अनुवाद का उपयोग नहीं करता है (और इसमें अन्य होगा संयुक्त राष्ट्र शेष आवेदन पर इच्छित परिणाम)।

किसी भी मदद के लिए अग्रिम धन्यवाद।

Answer 1

यदि आप ऑब्जेक्टबाउंडिंगबॉक्स इकाइयों का उपयोग करते हैं तो 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> तत्व के बच्चे को बना सकते हैं और इसके बजाय <g> तत्व को बदल सकते हैं।

Answer 2

पैटर्न ऑब्जेक्ट्स "ऑब्जेक्टबाउंडिंगबॉक्स" के मान सेट करने का प्रयास करें।

Answer 3

मुझे वास्तव में एक ही समस्या का सामना करना पड़ा और एक समाधान मिला। मैंने बदलावों को दिखाने के लिए अपनी पहेली को फंसाया है। असल में, आप patternContentUnits विशेषता को हटाते हैं क्योंकि यह प्रत्येक अपडेट के बाद रेक्ट ऑब्जेक्ट से मेल खाने के लिए छवि की एक्स विशेषता को अपडेट और अपडेट नहीं करता है।

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> 

अपडेट किया गया जे एस:

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