عنصر path هو العنصر الشامل المخصص لتعريف الأشكال. يمكن إنشاء جميع الأشكال الأساسية باستخدام عنصر path. يستخدم عنصر SVG <path> لرسم الأشكال المتقدمة المكونة من خطوط، منحنيات، منحنيات، وما إلى ذلك، مع أو بدون تعبئة. قد يكون هذا العنصر هو الأكثر تقدماً والأكثر شمولاً من جميع العناصر في SVG. قد يكون أيضًا العنصر الأكثر صعوبة في التعلم.
هذا المثال يرسم خطًا من نقطة 50،50 (نقطة الأمر M) إلى نقطة 100،100 (نقطة الأمر L). بعد التنفيذ، سيكون شكل الصورة كالتالي:
الفرق بين الأمرين L و l يكمن في أن النسخة الكبيرة (L) ترسم خطًا إلى النقطة المطلقة المقدمة للأمر، بينما النسخة الصغيرة (l) ترسم خطًا إلى النقطة النسبية المقدمة للأمر. النقطة النسبية هي النقطة التي كانت القلم الرسمي في بداية السطر، بالإضافة إلى أordinates المقدمة للأمر l. إذا كان القلم الرسمي في 50،50، واستخدمت الأمر l100,100، فإن الخط سيتم رسمه كـ 50+100،50+100=150،150. وبغض النظر عن موقع القلم الرسمي، يمكن استخدام الأمر L100,100 لرسم الخط بدقة إلى 100،100.
تحريك القلم الرسمي
يبدأ شكل المسار دائمًا من النقطة الافتراضية الأخيرة للقلم إلى النقطة الجديدة. لدى كل أمر رسم نهاية. بعد تنفيذ هذا الأمر، سيكون نقطة القلم في نهاية هذا الأمر الرسمي. سيبدأ الأمر التالي من هذه النقطة.
الشكل الدائري
استخدام علامة <path> لرسم دائرة مستقيمة يتم من خلال أوامر A و a. مثل الخطوط، يستخدم الأمر الكبير (A) أordinates مطلقة كنقطة نهاية، بينما يستخدم الأمر الصغير (a) أordinates نسبية (نسبة للبداية). إليك مثال:
هذا المثال يرسم دايره من نقطة 50,50 إلى نقطة 100,100 (في أمر A المحدد في النهاية). قطر الدايره يتم تعيينه من خلال الاعدادت الاولى والثانيه في أمر A. الاعدادت الاولى هي rx (ال幅射ية في الاتجاه x)، والاعدادت الثانية هي ry (ال幅射ية في الاتجاه y). عند تعيين rx وry إلى نفس القيم، يتم إنتاج دايره. عند تعيين rx وry إلى قيم مختلفه، يتم إنتاج دايره بيضاوية. في المثال السابق، تم تعيين rx إلى 30، وry إلى 50. الاعدادت الثالثه الم设定的 في أمر A هي تدوير المحور x (x-axis-rotation). مقارنة بالمحور x العادي، سيقوم هذا بتدوير محور x للدائرة. في المثال السابق، تم تعيين تدوير المحور x إلى 0. في معظم الحالات، لا تحتاج إلى تغيير هذا المعادلة.
الاعدادت الرابعة والخامسة هي علامات الدايره الكبيره (large-arc-flag) وعلامات التدوير (sweep-flag) الاعدادت. علامة الدايره الكبيره (large-arc-flag) تحدد ما إذا كان سيتم رسم دايره صغيرة أو كبيرة تفي ببدء النقطة والنهاية وrx وry. هنا مثال على رسم دايره من أربعة أجزاء، كل منها له علامات الدايره الكبيره (large-arc-flag) وعلامات التدوير (sweep-flag) المختلفه:
يمكن رسم أربعة منحنيات مختلفة من 40،20 إلى نقطة 60،70. منحنى طويل، منحنى صغير، بالإضافة إلى نسختين من كل صغير/كبير من المناطق المظللة. تحدد علامة الدائرة ما إذا كان سيتم رسم المنحنى الكبير أم الصغير. تحدد علامة التدوير ما إذا كان سيتم رسم المنحنى حول محور من النقطة المبدأية إلى النقطة النهائية. في الواقع، تحدد علامة التدوير اتجاه رسم المنحنى (بالتدوير clockwise أو counter-clockwise)، مما ينتج تأثير "م镜像".
هي الأرصفة الأولى هي الأرصفة الصفراء. تعيين علامة الدائرة الكبيرة في قيمة 0 يعني رسم أصغر من بين الأرصفة المحتملة. يتم تعيين علامة التدوير أيضًا في قيمة 0، مما يعني أن الأرصفة لن تكون م镜像. إليك عرضًا للأرصفة الصفراء:
هي الأرصفة الثانية هي الأرصفة الحمراء. تعيين علامة الدائرة الكبيرة في قيمة 1 يعني رسم أكبر من بين الأرصفة المحتملة، في نطاق من 40،20 إلى 60،70. إليك عرضًا مشتركًا للأرصفة الصفراء والأحمر لشرح الفرق:
تكون الأرصفة الخضراء والأزرق (من جميع الأرصفة الأربعة في المثال السابق) متشابهة مع الأرصفة الصفراء والأحمر، ولكن يتم رسمها باستخدام علامة التدوير (sweep-flag) في قيمة 1. مما يعني أنها سترسم نفس الدائرة، ولكن في م镜像 على محور من النقطة المبدأية إلى النقطة النهائية.
منحنى بيزييلاي ثنائي
يمكن أيضًا استخدام عنصر <path> لرسم منحنيات بيزاريل ثنائية. يتم رسم منحنيات بيزاريل الثنائية باستخدام الأمر Q و Q. مثل الخطوط، يستخدم الأمر الكبير (Q) الأنظمة الإحداثية المطلقة كنقطة نهاية، بينما يستخدم الأمر الصغير (q) الأنظمة الإحداثية النسبية (على النقيض من النقطة المبدأية). إليك مثال بسيط على منحنية ثنائية:
هذا المثال يرسم منحنية بيزاريل ثنائية، من 50،50 إلى نقطة 100،100،نقطة التحكم 50،200. نقطة التحكم هي أول parameter المحدد في الأمر Q.
تنجذب منحنيات التحكم مثل المغناطيس للمنحنيات. كلما كان نقطة على المنحنى أقرب إلى نقطة التحكم، زادت قوة جذب التحكم، مما يعني أن نقطة التحكم أقرب إلى النقطة. إليك بعض الأمثلة على رسم منحنيات التحكم في الصورة:
في الواقع، إذا قمت برسم خط من النقطة المبدأية إلى نقطة التحكم، ثم برسم خط من نقطة التحكم إلى النقطة النهائية، فإن الخط الذي يمتد من منتصف الخط الأول إلى منتصف الخط الثاني هو خط الطبقة للمنحنى. هناك صورة توضح هذا النقطة:
منحنيات بيزاريل الثلاثية
يُستخدم الأمر C و c لرسم منحنيات بيزاريل الثلاثية. تشبه منحنيات بيزاريل الثنائية، باستثناء أن لديها نقطتين تحكم بدلاً من نقطة واحدة. مثل الخطوط، يستخدم الأمر الكبير (C) الأنظمة الإحداثية المطلقة كنقطة نهاية، بينما يستخدم الأمر الصغير (c) الأنظمة الإحداثية النسبية (على النقيض من النقطة المبدأية):
هذه هي صورة النقاط التحكم بعد التنفيذ، والنتيجة بعد التنفيذ كالتالي:
يمكنك استخدام منحنى Bezier ثلاثي لإنشاء منحنيات متقدمة:
إغلاق المسار
يحتوي عنصر <path> على أمر用于 إغلاق المسار، مما يعني أن الخط الذي يعود إلى النقطة الأولى بعد النقطة الأخيرة المرسومة هو أمر مختصر. هذا الأمر هو Z (أو z-لا يوجد فرق بين الأحرف الكبيرة والصغيرة في الأمر الإغلاق المسار)
يمكنك استخدام العلامات على عنصر <path>. العلامات هي الرموز الصغيرة الموجودة في بداية وسط ونهاية المسار، وتُستخدم لعرض اتجاه المسار. على سبيل المثال، هناك دائرة أو مربع في بداية المسار، وأيقونة مرسوم في نهايته.
الطريقة السريعة بالرموز
إذا كنت بحاجة إلى استخدام الأمر نفسه مرارًا وتكرارًا، يمكنك تجنب الحرف الخاص بالأمر وتقديم مجموعة إضافية من المعلمات فقط، تمامًا كما يظهر الأمر هناك. هذا مثال:
هذا المثال يوضح كيفية إرسال باقي المعلمات إلى الأمر l، وكأن كل معلمة تسبقها l. هذا ينطبق أيضًا على أوامر المسار الأخرى. إليك الصورة المولدة:
دليل الأمر Path الكامل
هذه هي SVG مسارالعنصرقائمة بأمر القلم الممكنة.كل أمر يتكون من حرف واحد و مجموعة من الأرقام (الأحداثيات، إلخ) وهي متغيرات الأمر.عادةً ما تُفسر المتغيرات المكتوبة بالحروف الكبيرة كإحداثيات مطلقة.عادةً ما تُفسر المتغيرات المكتوبة بالحروف الصغيرة كإحداثيات تُعتمد على الوضع الحالي للقلم.
الأوامر
المتغيرات
الاسم
وصف
M
x,y
moveto
تحريك القلم إلى النقطة المحددة x،y دون رسم.
m
x,y
moveto
تحريك القلم إلى النقطة المحددة x،y بالنسبة للوضع الحالي للقلم دون رسم.
L
x,y
Lineto
رسم خط مستقيم من النقطة الحالية للقلم إلى النقطة المحددة x،y.
l
x,y
Lineto
رسم خط مستقيم من النقطة الحالية للقلم إلى النقطة المحددة x،y.
H
X
الخط الأفقي
رسم خط أفقي إلى النقطة المحددة
(x المحدد، y الحالية للقلم).
H
X
الخط الأفقي
رسم خط أفقي من النقطة المحددة (x الحالي + x المحدد، y الحالية). x هو بالنسبة للإحداثيات الحالية للقلم.
V
y
الخط العمودي
في (المحددةالنقطة الحالية x، y المحددة)رسم خط عمودي على النقطة المحددة.
v
y
الخط العمودي
رسم خط عمودي إلى النقطة المحددة (-x الحالي، x الحالي + y المحددة).y بالنسبة للوضع الحالي للقلم.
C
x1،y1 x2،y2 x،y
المنحنى
من نهاية القلم إلى x،y رسم منحنى بيزييلاي ثلاثي.x1،y1 وx2،y2 هي البداية والنهاية للمنحنى، وتتحكم في كيفية انحناء المسار.
c
x1،y1 x2،y2 x،y
المنحنى
مثل C، لكن يوضح بالنسبة للإحداثيات الحالية للقلم.
S
x2،y2 x،y
ملاحظة/ منحنى ملساء
من نهاية القلم إلى x،y رسم منحنى بيزييلاي ثلاثي.x2،y2 هي نقطة التحكم النهائية.تقدير أن نقطة التحكم البداية هي نفسها لنهاية التحكم للخط السابق.
s
x2،y2 x،y
ملاحظة/ منحنى ملساء
مثل S، لكن يوضح بالنسبة للإحداثيات الحالية للقلم.
Q
x1،y1 x،y
منحنى بيزييلاي ثنائي
من نهاية القلم إلى x،y رسم منحنى بيزييلاي ثنائي.x1،y1 هي نقاط التحكم التي تحدد كيفية انحناء المسار.
q
x1،y1 x،y
منحنى بيزييلاي ثنائي
مثل Q، لكن يوضح بالنسبة للإحداثيات الحالية للقلم.
T
x,y
كتابة مختصرة/منحنيات بيسل الثنائية الم smoothing
من نهاية القلم إلى x،y رسم منحنى بيزييلاي ثنائي.يفرض أن نقطة التحكم هي نفسها كنقطة التحكم التي تم استخدامها مؤخرًا.
t
x,y
كتابة مختصرة/منحنيات بيسل الثنائية الم smoothing
مثل T، لكن يفسر بشكل مطلق بالنسبة للمسقط الحالي.
A
rx،ry الإدارة على المحور x علامة دائرة كبيرة، sweepflag x،y
دائرة بيضاوية
رسم دائرة بيضاوية من نقطة الحالية إلى نقطة x،y.rx و ry هي قطرات البيضاية في اتجاهات x و y. يحدد دوران X مقدار دوران الدائرة البيضاوية حول المحور x.يبدو أن ذلك يعمل فقط عندما يكون rx و ry مختلفين. يبدو أن علامة large-arc غير مستخدمة (يمكن أن تكون 0 أو 1).القيم (0 أو 1) لا تغير دائرة البيضاوية. يحدد علامة التحرك اتجاه رسم الدائرة البيضاوية.
a
rx،ry الإدارة على المحور x علامة دائرة كبيرة، sweepflag x،y
دائرة بيضاوية
مثل A، لكن يفسر بشكل مطلق بالنسبة للمسقط الحالي.
Z
إغلاق المسار
إغلاق المسار من خلال رسم خط من نقطة الحالية إلى النقطة الأولى.
z
إغلاق المسار
إغلاق المسار من خلال رسم خط من نقطة الحالية إلى النقطة الأولى.