SVG
परिवर्तन

टिप्पणियों

<svg xmlns="http://www.w3.org/2000/svg">
    <rect x="0" y="0" width="30" height="30" transform="translate(10, 10)" />
</svg>

<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>

अनुवाद करना

आयत 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>