जावास्क्रिप्ट में एसवीजी ट्रांसफॉर्मेशन

Question

एसवीजी ट्रांसफॉर्मेशन जावास्क्रिप्ट के माध्यम से उनके संबंधित गुण setAttribute("transform", "translate(x,y)") सेटिंग्स द्वारा किया जा सकता है लेकिन शुद्ध जावास्क्रिप्ट के माध्यम से भी संभव होना चाहिए।

elem.transform.baseVal.getItem(0).setTranslate(x, y); 
elem.transform.baseVal.getItem(0).setRotate(x, y); 

इन दोनों को अनुवाद और रोटेशन के लिए काम करना चाहिए, लेकिन स्कूइंग, स्केलिंग और मैट्रिक्स के बारे में कैसे काम करना चाहिए? elem.transform.baseVal.getItem(0).setMatrix() मौजूद है, लेकिन जहां तक ​​मैं कह सकता हूं, यह किसी भी पैराम को स्वीकार नहीं करता है और SVGCreateMatrix() किसी भी पैरा को स्वीकार नहीं करता है। मुझे यह कैसे करना चाहिए, और बोनस प्रश्न के रूप में: getItem(0) वास्तव में क्या करता है?

Answer 1

प्रत्येक <svg> तत्व में createSVGMatrix डोम विधि है।

var matrix = svgElement.createSVGMatrix(); 

यह पहचान मैट्रिक्स है।

फिर आप manipulate this ...

matrix = matrix.translate(10, 10); 

या सीधे ...

matrix.a = 3; 

और फिर इसे

elem.transform.baseVal.getItem(0).setMatrix(matrix); 

getItem(0) एक विशेषता को बदलने में पहला तत्व हो जाता है का उपयोग कर सकते जैसे

transform="translate(1, 1) scale(2)" 

getItem(0)translate(1, 1) मैट्रिक्स हो जाता है और getItem(1)scale(2) मैट्रिक्स

आप एक एक तत्व पर बदलने सेट नहीं किया है तो getItem(0) फेंक जाएगा हो जाता है। आप ट्रांसफॉर्म को जोड़ने के लिए numberOfItems का उपयोग कर रहे हैं और/या createSVGTransformFromMatrix का उपयोग करके प्रारंभिक आइटम को अपने मैट्रिक्स को बदलने के लिए और appendItem का उपयोग करके प्रारंभिक आइटम जोड़ सकते हैं।