تحويلات SVG

يُقوم بإنشاء تحويلات SVG في الأشكال الموجودة في الصورة SVG. مثل تحريك، تضخيم ولف الشكل. هذا طريقة مريحة لعرض النصوص العمودية أو المائلة.

مثال تحويل

هذا مثال بسيط:

<svg xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<rect x="50" y="50" height="110" width="110"
　　　　　　　　　　style="stroke:#ff0000; fill: #ccccff" transform="translate(30) rotate(45 50 50)"
　　　　　　　　　　　　>
　　　　</rect>
　　　　<text x="70" y="100" transform="translate(30) rotate(45 50 50)"
　　　　>oldtoolbag.com</text>
</svg>

تأثير الصورة بعد التشغيل:

ملاحظة<rect>عنصرتحويل و <text>منتحويلالخصائص. تُحدد هذه الخاصية التحول الذي سيُطبق على الشكل. في هذا المثال، تم تطبيق الترحيل واللف. كلاهما سيُوضحان في النص اللاحق.

ما هي العناصر التي يمكن تحويلها؟

يمكنك تطبيق التحول على جميع أشكال SVG. يمكنك أيضًا تطبيق التحول على<g> 　 　عناصر، مما يسمح بتحويل مجموعة العناصر ككل مرة واحدة بفعالية. يمكن أيضًا تحويل التدرج والنمط

وظائف التحويل

يقدم SVG أربعة وظائف تحويل:

• ترجمه()

• rotate()

• scale()

• skew()

• matrix()

ستقدم الفصول التالية شرحًا مفصلاً عن كل وظيفة من هذه الوظائف.

في الواقع، وظيفة التحويل لا تقوم بتحويل شكل SVG تلقائيًا، بل تقوم بتحويل نظام الإحداثيات الأساسي للشكل. لذلك، حتى إذا تم عرض العرض بمضاعف، الشكل ذو عرض 20 مُضاعفين لا يزال له عرض منطقي قدره 20.

تحريك

ترجمه()وظيفة تحريك الشكل. ستقومx و y　 قيمة تُنقل إلىترجمه()وظيفة. هذا مثال:

ترجمه(50,25)

سيقوم هذا المثال بتحريك الشكل 50 وحدة في المحور x و25 وحدة في المحور y.

هذا مثال يظهر شكلين متساويين في الموقع والحجم، أحدهما يحتوي على تحريك

<svg　width="500"　height="150">
<rect　x="20"　y="20"　width="50"　height="50"
　　　　　　style="fill:　#cc3333"/>
<rect　x="20"　y="20"　width="50"　height="50"
　　　　　　style="fill:　#3333cc"　transform="translate(75,25)"
</svg>

تأثير الصورة بعد التشغيل:

لاحظ كيف أن الشكل الثاني (أزرق) تم تحريكه 75 وحدة في المحور x و25 وحدة في المحور y مقارنة بالشكل الأول (أحمر).

الدوران

rotate()تدور الدالة الشكل حول نقطة 0,0. هذا مثال يظهر مستطيلًا (محيط) ومستطيلًا مقلوبًا بزاوية 15 درجة:

<svg　width="500"　height="150">
<rect　x="20"　y="20"　width="40"　height="40"
　　　　　　style="stroke:　#3333cc;　fill:none;"
　　　　　　　　
<rect　x="20"　y="20"　width="40"　height="40"
　　　　　　style="fill:　#3333cc"
　　　　　　transform="rotate(15)"
　　　　　　　　
　　　　</svg>

تأثير الصورة بعد التشغيل:

إذا كنت تريد الدوران حول نقطة غير 0,0، فأرسل أرقام الإحداثيات x وy لهذه النقطةتحويلالدالة. هذا مثال يظهر مستطيلًا غير مقلوب (محيط) ومستطيلًا مساوٍ في الحجم (ملون) يقلب حول مركزه بزاوية 15 درجة:

<svg　width="500"　height="150">
<rect　x="20"　y="20"　width="40"　height="40"
　　　　　　style="stroke:　#3333cc;　fill:none;"
　　　　　　　
<rect　x="20"　y="20"　width="40"　height="40"
　　　　　　style="fill:　#3333cc"
　　　　　　transform="rotate(15,　40,　40)"
　　　　　　　
</svg>

تأثير الصورة بعد التشغيل:

كل الدورانات تكون دورانات مائلة إلى اليمين، وتتراوح درجاتها بين 0 و360. إذا كنت تريد الدوران في الاتجاه المعاكس، فأرسل درجة سالبة إلىrotate()الدالة.

التكبير

scale()تقوم الدالة بتكبير أو تقليل الشكل.scale()تقوم الدالة بتقليل حجم الشكل ومدخلات المواقع. لذلك، يتم تكبير الشكل بمعدل 20 ضعف 2، ويكون حجم الشكل 20x30 ويكون الموقع في 20,20، ويكون العرض 40 والارتفاع 60.

scale()يمكن للدالة أيضًا تقليل عرض الخطوط للشكل.

هذا مثال يظهر شكلًا يوجد في نقطة 10,0، وعرضه 20 وارتفاعه 20، ومستطيل مساوٍ في الحجم (أسود)، بمعامل تكبير 2:

<svg　width="500"　height="150">
<rect　x="10"　y="10"　width="20"　height="30"
　　　　　　style="stroke:　#3333cc;　fill:none;\
<rect　x="10"　y="10"　width="20"　height="30"
　　　　　　style="stroke:　#000000;　fill:none;"　transform="scale(2)"
</svg>

تأثير الصورة بعد التشغيل:

لاحظ كيف يتم تقليل موقع الشكل والحجم.

يمكنك تقليل الشكل في المحور x والي باستخدام معاملات أخرى. لتحقيق ذلك، يمكنك إضافةscale()يقدم الدالة معاملات x-scale و y-scale كما يلي:

scale(2,3);

هذا المثال سيزيد الشكل في المحور x بمعدل 2 ضعف، ويزيد في المحور y بمعدل 3 ضعف. هذا مثال:

<svg　width="500"　height="150">
<rect　x="10"　y="10"　width="20"　height="30"
　　　　　　style="stroke:　#3333cc;　fill:none;\
<rect　x="10"　y="10"　width="20"　height="30"
　　　　　　style="stroke:　#000000;　fill:none;"　　transform="scale(2,3)"
</svg>

تأثير الصورة بعد التشغيل:

يرجى الانتباه إلى كيف يتم تقليل عرض الخطوط للرسم البياني المعدل (الأسود) وكيف يتم تقليل نسبة التكبير في المحور x والي

تقوم بتكبيرها لتكون دالة مرآة

scale()من خلال التكبير والتصغير بنسبة -1 في اتجاه x أو y، 　 　يمكن استخدام هذه الدالة كدالة مرآة. بعد الانتهاء، يجب عليك تحريك الشكل في اتجاه x أو y (تحريك) قبل أن يظهر الشكل المرآة خارج لوحة SVG.

إليك مثال:

<svg　width="500"　height="150">
<path　d="M20,20　l20,20　l0,20　l-20,20　Z"
　　　　　　style="stroke:　#3333cc;　fill:none;"　/>
<path　d="M20,20　l20,20　l0,20　l-20,20　Z"
　　　　　　style="stroke:　#000000;　fill:none;"
　　　　　　transform="translate(100,　0)　scale(-1,　1)　"　</svg>

النتيجة الصورية للخطوط المرسومة عند x = 100 (بما أن المثلث قد تم تحريكه 100 في اتجاه x).

الأزرق هو الشكل الأصلي. الشكل الأسود هو الشكل الذي تم تحويله بنسب التكبير والتصغير.

الانحناء

skewX()وskewY()تغير الدالة انحناء المحور x والي. في الواقع، هذه الدوال تنحني المحاور المحددة بناءً على الزاوية المحددة بالدرجات.

إليك عرض بعضها:skewX()بعض الأمثلة على المثلثات.

<svg　width="500"　height="150">
<rect　x="10"　y="10"　width="20"　height="30"
　　　　　　style="stroke:　#3333cc;　fill:none;"　/>
<rect x="50" y="10" width="20" height="30"
　　　　　　style="stroke:　#000000;　fill:none;"
　　　　　　transform="skewX(10)"　/>
<rect　x="100"　y="10"　width="20"　height="30"
　　　　　　style="stroke:　#000000;　fill:none;"
　　　　　　transform="skewX(45)"　/>
<rect　x="150"　y="10"　width="20"　height="30"
　　　　　　style="stroke:　#000000;　fill:none;"
　　　　　　transform="skewX(60)"　</svg>

تأثير الصورة بعد التشغيل:

كما ترون،skewX()تعطي الدالة جعل الخط العمودي يبدو كأنه يتحول بزاوية معينة. لذلك،skewY()تعطي الدالة جعل الخط الأفقي يبدو كأنه يتحول بزاوية معينة. إليك بعض الأمثلة:

<svg　width="500"　height="150">
<rect　x="10"　y="10"　width="20"　height="30"
　　　　　　style="stroke:　#3333cc;　fill:none;"　/>
<rect x="50" y="10" width="20" height="30"
　　　　　　style="stroke:　#000000;　fill:none;"
　　　　　　transform="skewY(60)"　/>
<rect　x="100"　y="10"　width="20"　height="30"
　　　　　　style="stroke:　#000000;　fill:none;"
　　　　　　transform="skewY(45)"　/>
<rect　x="150"　y="10"　width="20"　height="30"
　　　　　　style="stroke:　#000000;　fill:none;"
　　　　　　transform="skewY(10)"　</svg>

المصفوفة

يمكن أيضًا تمثيل التحول كمعادلة. إليك المصفوفة:

a    c    e
b    d    f
0　　0　　1

بما أن يمكن تحديد فقط الستة أرقام، لذا يمكن تقديم ستة أرقام فقط لأداة تحويل المصفوفة. إليك مثال:

transform="matrix(a,b,c,d,e,f)"

يمكن تمثيل وظائف التحول الأخرى كمعادلة. إليك بعض الأمثلة:

ترجمه
1    0      tx
0    1      ty
0    0      1
مatrix(1,0,0,1,tx,ty)

الدوران
cos(a)　　　-sin(a)　　0
sin(a)　　　　cos(a)　　0
　　　　　0　　　　　　　　0　　　1
matrix(cos(a), sin(a), -sin(a), cos(a), 0, 0)

ملاحظة: القيمةcos(a)وsin(a)قبل إدراجه في المصفوفة يجب حساب هذا المعامل مسبقًا.aهو زاوية الدوران.

التحجيم
sx　　0　　0
　0　sy　　0
　0　　0　　1
matrix(sx,0,0,sy,0,0)

يمكن كتابة تحويل التدرج العمودي عبر المحور x كالتالي:

الكسور
1　　tan(a)　　0
0　　　　　　　1　　0
0　　　　　　　0　　1
matrix(1,0,tan(a),1,0,0)

tan(a)القيم فيmatrix()يجب حساب الدوال مسبقًا قبل إدخالها.

يمكن تمثيل تحويل التدرج الأفقي عبر المحور y كالتالي:

الكسور
1　　　　　　　0　　0
tan(a)　　1　　0
0　　　　　　　0　　1
matrix(1,tan(a),0,1,0,0)

هذا مثال على تحويلات مصفوفة SVG المتمثلة في وظيفة تحويل بسيطة:

<svg　width="500"　height="150">
<rect　x="20"　y="20"　width="50"　height="50"
　　　　　　style="fill:　#cc3333"/>
<rect　x="20"　y="20"　width="50"　height="50"
　　　　　　style="fill:　#3333cc"
　　　　　　transform="matrix(1,0,0,1,100,20)"
　　　　　　　　/>
</svg>

تأثير الصورة بعد التشغيل:

لاحظ كيف يتم تحويل المربع الأيمن (أزرق) مقارنة بالمربع الأيسر (أحمر).

تجمع التحولات

يمكن تجميع التحولات. يمكنك القيام بذلك عن طريقتحويليمكن تحقيق ذلك عن طريق وضع عدة وظائف تحويل داخل السمة.

هذا مثال يوضح كيفية تحريك المربع أولاً ثم تدويره. يظهر هذا المثال المربع (أسود) قبل تطبيق أي تحويل وبعد تطبيق التحويل (أزرق).

<svg　width="500"　height="150">
<rect x="50" y="10" width="20" height="30"
　　　　　　style="stroke:　#3333cc;　fill:none;"
　　　　　　　　/>
<rect x="50" y="10" width="20" height="30"
　　　　　　style="stroke:　#000000;　fill:none;"
　　　　　　transform="translate(50,0)　rotate(30)"　/>
</svg>

تأثير الصورة بعد التشغيل:

ترتيب التحول مهم

ترتيب التحول مهم فيتحويلترتيب التحولات المحددة في السمة هو الترتيب الذي يتم تطبيقها على الشكل.

في هذا المثال، سيتم شرح الفرق بين تحريك الشكل أولاً ثم التدوير، والتدوير أولاً ثم التحريك لشكل آخر:

<svg　width="500"　height="150">
<rect x="50" y="10" width="20" height="30"
　　　　　　style="stroke:　#000000;　stroke-width:　2px;　fill:none;"
　　　　　　　　/>
<rect x="50" y="10" width="20" height="30"
　　　　　　style="stroke: #3333cc; stroke-width: 2px; fill:none;"
　　　　　　transform="translate(100,0) rotate(45)" />
<rect x="50" y="10" width="20" height="30"
　　　　　　style="stroke: #cc3333; stroke-width: 2px; fill:none;"
　　　　　　transform="rotate(45) translate(100,0)" />
</svg>

تأثير الصورة بعد التشغيل:

مستطيل أسود لم يطبق عليه أي تحويل. أولاً، انتقل إلى المستطيل الأزرق، ثم أعد تدويره. أولاً، أعد تدوير المستطيل الأحمر، ثم انتقل إليه.