एसवीजी रेक्ट तत्व की पृष्ठभूमि छवि कैसे सेट करें?

Question

मैंने केथ-लकड़ी की jQuery एसवीजी प्लगइन का उपयोग करके एक एसवीजी रेक्ट बनाया। यहाँ कोड है:

svg.graph._wrapper.rect(group, 0, 100, 40, 20, 
         {fill: 'ivory', 
         stroke: 'black', 
         strokeWidth : 2}); 

तो मैंने सोचा कि मैं आसानी से बजाय 'हाथी दांत' का उपयोग कर का भरण को बदल सकता है, मैं इसे 'theImageIwantToUse' में बदल दिया। लेकिन यह काम नहीं लग रहा है।

Answer 1

आप के द्वारा अपने svg में छवियों सम्मिलित कर सकते हैं <image> तत्व http://www.w3.org/TR/SVG/struct.html#ImageElement

आपके द्वारा उल्लिखित प्लगइन में एक उपयुक्त फ़ंक्शन उपलब्ध है।

svg.image(parent, x, y, width, height, ref, settings) 

(http://keith-wood.name/svg.html)

मुझे शक है यह एक छवि में स्ट्रोक का उपयोग करें ताकि आप छवि ड्राइंग सटीक परिणाम आप चाहते हैं पाने के लिए के बाद कोई भरण के साथ एक आयत बनाने के लिए होगा संभव है।

Answer 2

आप एसवीजी ऑब्जेक्ट्स की पृष्ठभूमि के रूप में सीधे बाहरी छवि नहीं डाल सकते हैं।

इसके बजाय, आप पहली बार इस

var ptn = svg.pattern(defs, "imgPattern", 0, 0, 100, 100, 0, 0, 10, 10, 
         {patternUnits: "userSpaceOnUse"}); 
svg.image(ptn, 100, 50, 200, 200, "./theImageIwantToUse.png"); 

की तरह एक patttern बनाने के लिए और भरण विशेषता में url() समारोह के माध्यम से तो इस पद्धति का उपयोग

svg.graph._wrapper.rect(group, 0, 100, 40, 20, 
         {fill: 'url(#imgPattern)', 
         stroke: 'black', 
         strokeWidth : 2});