SVG
परिवर्तन

वाक्य - विन्यास

• बदलना = " [कार्य] * "
• का अनुवाद (एक्स [, वाई])
• घुमाएँ (θ [, एक्स, वाई])
• पैमाने (एक्स [, वाई])
• skewX (θ)
• skewY (θ)
• मैट्रिक्स (ए, बी, सी, डी, ई, एफ)

ट्रांसफ़ॉर्मेशन लागू करना

ट्रांस्फ़ॉर्मेशन को transform विशेषता जोड़कर तत्वों पर लागू किया जा सकता है:

<circle cx="0" cy="0" r="50" transform="translate(50,50)"/>

या <g> टैग में संलग्न तत्वों के समूहों के लिए:

<g transform="translate(50,50)">
<circle cx="0" cy="0" r="50"/>
<circle cx="0" cy="0" r="25" fill="white"/>
</g>

रिक्त स्थान द्वारा उन्हें अलग करके एक ही तत्व में अधिक परिवर्तन लागू किए जा सकते हैं:

<circle cx="0" cy="0" r="50" transform="translate(50,50) scale(.5)"/>

परिवर्तन कार्य

अनुवाद करना

निर्दिष्ट वैक्टर के साथ चालें ग्राफिक्स का translate :

<circle cx="0" cy="0" r="50" transform="translate(50,50)"/>

पहला मान x अनुवाद है, और दूसरा y। यदि y छोड़ा गया है, तो यह 0 पर डिफ़ॉल्ट होगा।

स्केल

scale निर्दिष्ट अनुपात द्वारा तत्वों का आकार बदलता है:

<circle cx="50" cy="50" r="25" transform="scale(.5,2)"/>

translate तरह, तर्क x हैं, फिर y। हालांकि, scale , यदि y छोड़ा जाता है, तो यह x के मान के लिए डिफ़ॉल्ट होगा; दूसरे शब्दों में, यह पहलू अनुपात को बदले बिना तत्व को मापता है।

घुमाएँ

rotate निर्दिष्ट कोण से घूमता तत्वों।

<!-- <rect> used for this example because circles can't be rotated -->
<rect width="100" height="5" transform="rotate(90,50,50)"/>

पहला मान कोण है, डिग्री में। परिवर्तन को दक्षिणावर्त लागू किया जाता है। अन्य दो मूल्य बिंदु को घुमाए जाने का प्रतिनिधित्व करते हैं, मूल के लिए डिफ़ॉल्ट।