SVG
परिवर्तन
खोज…
टिप्पणियों
एक परिवर्तन विशेषता जोड़कर ग्राफिक तत्वों को बदला जा सकता है।
<svg xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="0" width="30" height="30" transform="translate(10, 10)" />
</svg>
निर्देशांक (0, 0) पर दिए जा रहे शीर्ष बाएं मूल के बजाय, इसे बिंदु (10, 10) से नीचे और दाएं दिखाया जाएगा।
तत्वों के पूरे समूहों को एक साथ रूपांतरित किया जा सकता है, और परिवर्तन एक दूसरे को जोड़ सकते हैं।
<svg xmlns="http://www.w3.org/2000/svg">
<g transform="rotate(45)">
<rect x="0" y="0" width="30" height="30" />
<circle cx="5" cy="5" r="5" transform="scale(3)" />
</g>
</svg>
सबसे पहले, सर्कल के हर बिंदु को मूल (15, 15) पर सर्कल के केंद्र को लाने और उसके त्रिज्या के बीच के कारक के साथ कारक 3 के साथ स्केल किया जाएगा। फिर, आयत और सर्कल को मूल के चारों ओर 45 डिग्री दक्षिणावर्त घुमाया जाएगा।
अनुवाद करना
आयत 10 इकाइयों को दाईं ओर और 20 इकाइयों को नीचे ले जाएँ:
<svg xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="0" width="30" height="30" transform="translate(10, 20)" />
</svg>
इसे 0 इकाइयों को क्षैतिज और 20 इकाइयों में ऊपर ले जाएँ:
<svg xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="20" width="30" height="30" transform="translate(0, -20)" />
</svg>
इसे 10 इकाइयों को बाईं ओर और 0 इकाइयों को लंबवत रूप से ले जाएँ:
<svg xmlns="http://www.w3.org/2000/svg">
<rect x="10" y="0" width="30" height="30" transform="translate(-10)" />
</svg>
स्केल
फैक्टर 2 द्वारा क्षैतिज रूप से आयत और कारक 0.5 से लंबवत:
<svg xmlns="http://www.w3.org/2000/svg">
<rect x="10" y="10" width="40" height="40" transform="scale(2, 0.5)" />
</svg>
परिणाम के बराबर है
<svg xmlns="http://www.w3.org/2000/svg">
<rect x="20" y="5" width="80" height="20" />
</svg>
एक आयत क्षैतिज रूप से दर्पण:
<svg xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="0" width="20" height="40" transform="scale(-1, 1)" />
</svg>
स्केल मूल के संबंध में काम करता है, इसलिए यह इसके बराबर है
<svg xmlns="http://www.w3.org/2000/svg">
<rect x="-20" y="0" width="20" height="40" />
</svg>
घुमाएँ
मूल के चारों ओर 90 डिग्री से एक बहुभुज को घुमाएं:
<svg xmlns="http://www.w3.org/2000/svg">
<polygon points="0,0 30,0 15,20" transform="rotate(90)" />
</svg>
परिणाम के बराबर है
<svg xmlns="http://www.w3.org/2000/svg">
<polygon points="0,0 0,30 -20,15" />
</svg>
रोटेशन के केंद्र को स्पष्ट रूप से दिया जा सकता है:
<svg xmlns="http://www.w3.org/2000/svg">
<polygon points="0,0 30,0 15,20" transform="rotate(90, 15, 15)" />
</svg>
परिणाम के बराबर है
<svg xmlns="http://www.w3.org/2000/svg">
<polygon points="30,0 30,30 10,15" />
</svg>
skewX, skewY
तिरछे एक बहुभुज को 45 डिग्री से तिरछा करें:
<svg xmlns="http://www.w3.org/2000/svg">
<polygon points="0,0 30,0 30,30 0,30" transform="skewX(45)" />
</svg>
परिणाम के बराबर है
<svg xmlns="http://www.w3.org/2000/svg">
<polygon points="0,0 30,0 60,30 30,30" />
</svg>
x मानों की गणना x + y * tan(angle) , y मान अपरिवर्तित रहते हैं
तिरछे एक बहुभुज को 30 डिग्री तक तिरछा करें:
<svg xmlns="http://www.w3.org/2000/svg">
<polygon points="0,0 30,0 30,30 0,30" transform="skewY(30)" />
</svg>
परिणाम (गोलाई के लिए अनुमति) के बराबर है
<svg xmlns="http://www.w3.org/2000/svg">
<polygon points="0,0 30,17.32 30,47.32 0,30" />
</svg>
x मान अपरिवर्तित रहते हैं, y मानों की गणना y + x * tan(angle)
आव्यूह
बहुभुज में परिवर्तन मैट्रिक्स लागू करें:
<svg xmlns="http://www.w3.org/2000/svg">
<polygon points="0,0 30,0 30,30 0,30" transform="matrix(1,0.6,-1.2,1,40,10)" />
</svg>
हर बिंदु (x, y) को इस तरह से मैट्रिक्स (ए, बी, सी, डी, ई, एफ) लगाकर रूपांतरित किया जाएगा:
┌ x_new ┐ ┌ a c e ┐ * ┌ x_old ┐ ┌ x_old * a + y_old * c + e ┐
└ y_new ┘ = └ b d f ┘ │ y_old │ = └ x_old * b + y_old * d + f ┘
└ 1 ┘
परिणाम के बराबर है
<svg xmlns="http://www.w3.org/2000/svg">
<polygon points="40,10 70,28 34,58 4,40" />
</svg>
एकाधिक परिवर्तन
परिवर्तनों को संक्षिप्त किया जा सकता है और दाएं से बाएं ओर लागू किया जाता है
90 डिग्री तक एक आयत घुमाएँ और फिर इसे 20 इकाइयों और 20 इकाइयों द्वारा दाईं ओर ले जाएँ:
<svg xmlns="http://www.w3.org/2000/svg">
<rect x="-10" y="-20" width="20" height="40"
transform="translate(20 20) rotate(90)" />
</svg>
परिणाम के बराबर है
<svg xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="10" width="40" height="20" />
</svg>
