SVG: استخدام الخطوط لإنشاء أشكال بسيطة ومعقدة

الخط هو شكل أساسي في svg. يمكن استخدامه لإنشاء أشكال بسيطة مثل خط أو مثلث أو شكل أكثر تعقيدًا. يمكن أيضًا استخدام الخط كمسار. المسار هو سلسلة من الخطوط المتصلة.

نظرًا لأنها أكثر قوة ومرونة من الأشكال القياسية ، يمكن استخدامها لإنشاء أي شيء وكل شيء. يحتوي عنصر المسار على مجموعة متنوعة من الأوامر والإحداثيات التي يمكن استخدامها لتحديد المسار. يتيح لك تعريف المسار (د) الانتقال إلى نقطة جديدة ورسم خطوط ومنحنيات مختلفة باستخدام سطر الأوامر. يمكن إنشاء المسار باستخدام أحد أوامر الأسطر الخمسة. سيستخدم هذا المنشور SVG المضمن للرمز. للبدء ، يتم تحديد المسار على النحو التالي: x = 50 و y = 50 (M 50 50 50). في هذا السطر التالي ، نستخدم الحرف l (l 0300) كحرف صغير.

الإحداثيات النسبية 0 300 مستمدة من النقطة الحالية (50 50) إلى هذه الأوامر. كما هو موضح في المثال التالي ، فإننا نستبدل أوامر الخط الثلاثة الوسطى بأوامر أفقية ورأسية. نظرًا لعدم تحديد إحداثيات ، لا يلزم تحديد آخر مجموعة من الإحداثيات. الخيار الثاني هو استخدام الفواصل لفصل الإحداثيات x و y بعد كل أمر. يمكن استخدام المسافة البيضاء لجعل كل أمر وبيانات المسار أكثر وضوحًا. تعد أوامر المسار أكثر تنوعًا من الأشكال البسيطة الموجودة في الفصول السابقة. من المثال الأول ، يمكن إنشاء مسار باستخدام أوامر خطية. يمكن أن يكون لكل أمر مسار خط تنفيذ خاص به ، ويمكنك استخدام المزيد من المسافات البيضاء. الأمر بسيط مثل أمر واحد لإنشاء سطرين يبدو أنهما غير متصلين.

يتم تحديد المسارات في SVG باستخدام عنصر "المسار". يتم وصف كل شكل أساسي من حيث مساره المكافئ ، وهو ما هو شكله. المسار هو ببساطة المسار نفسه ، على عكس مسار العنصر.

يجب توصيل نقطتين من خلال عنصر مثل عنصر السطر> لكي يتم إنشاء الخط في SVG.

هل من الممكن رسم أي مسار في Svg؟

نعم ، من الممكن رسم أي مسار في SVG. يوفر SVG قدرًا كبيرًا من الحرية عندما يتعلق الأمر برسم المسارات. يمكنك استخدام أوامر المسار المختلفة لإنشاء أي نوع تريده من الأشكال.

فيما يلي قائمة بأوامر المسار: moveto و lineto و curveto (كل من baziers التكعيبية و التربيعية) و arcs و closeepaths. المسار المركب (على سبيل المثال ، مسار به مسارات فرعية متعددة) يسمح بتعديل الكائنات باستخدام الثقوب الدائرية المجوفة. يصف هذا الفصل بناء الجملة ، والسلوك ، وواجهات DOM لمسارات SVG. يتبع أمر بيانات المسار سلسلة من الأوامر متبوعة بحرف واحد. تحتوي بيانات المسار على بنية بسيطة تسمح لها بتنزيل الملفات بمساحة أقل وبجهد أقل. من الممكن تقسيم بيانات المسار إلى عدة أسطر لتسهيل قراءتها بسبب وجود أحرف سطر جديد. عند استخدام الترميز ، سيتم تسوية الأسطر الجديدة في السمات بداخلها إلى أحرف المسافات.

تحدد سلسلة بيانات المسار شكلاً يمكن استخدامه كسلسلة للقيمة. ستساعدك الخطوات أدناه في التعامل مع الأخطاء داخل السلسلة استنادًا إلى قسم معالجة أخطاء بيانات المسار. إذا كان هناك واحد ، فيجب أن يسبق مقطع بيانات المسار بأمر moveto. يتم رسم خط مستقيم آلي من النقطة التي يبدأ عندها المسار الفرعي الحالي إلى النقطة التي ينتهي عندها المسار الفرعي. في هذه الحالة ، سيكون من المناسب استخدام مقطع من المسار بطول صفر. عند استخدام طريقة closepath ، يتم ربط نهاية المسار الفرعي ببداية المقطع الأول باستخدام قيمة "stroke-linejoin" المستخدمة حاليًا. يتصرف المسار الفرعي المفتوح بنفس طريقة تصرف المسار الفرعي المغلق ، لكن مقاطع المسار لا تتداخل.

عمليات إغلاق المسار لإكمال المقطع في Python غير مدعومة حاليًا. من النقطة الحالية إلى النقطة الجديدة ، ترسم أوامر الخط المختلفة خطوطًا مستقيمة. إذا أمرت بأمر l نسبي ، يمكنك الحصول على نقطة النهاية الدقيقة لخط (cpy x). في اتجاه المحور x الموجب ، فإن الأمر النسبي h لقيمة x الموجبة ينشئ خطًا أفقيًا. توفر الأمثلة الخمسة الأولى نظرة عامة على مقطع مسار Bezier المكعب. فيما يلي أوامر الأقواس البيضاوية الأربعة. عند استخدام أمر نسبي لرسم قوس ، فإن cpy x هي نقطة نهاية القوس (cpx x ، cpy y).

يمثل علم القوس الكبير وعلم الاجتياح أي من الأقواس الأربعة يتم رسمها. يجب أن تستهلك معالجة EBNF أكبر قدر ممكن من إنتاج معين حتى تتوقف بعد أن لم تعد الشخصية تلبي متطلبات الإنتاج. إذا كانت قيمة الخاصية d لا شيء ، فسيتم تعطيل العرض. عند حساب شكل الغطاء وتحديد العلامات ، يتم تجاهل الاتجاه الافتراضي عند حدود المقطع. يعتبر القوس الذي يحتوي على صفر rx أو ry جزءًا من خط مستقيم (خط مستقيم) ينضم إلى نقاط النهاية. يمكن العثور على إجراء القياس هذا في قسم الملحق في صيغة الرياضيات لإجراء القياس هذا. أجزاء المسار التي ليس لها طول غير صالحة ، ويمكن أن تسبب مشاكل في العرض في الحالات التالية.

للسماح لوكيل المستخدم بقياس حسابات المسافة بمسار ، يمكن استخدام سمة "طول المسار" لحساب إجمالي طول مسار المؤلف. عنصر "المسار" ليس له طول لعملية "الانتقال". يتم حساب طول المسار عن طريق تحديد عدة أوامر "lineto" و "curveto" و "arcto".

كيف أرسم خطًا أفقيًا في Svg؟

لرسم خط أفقي بتنسيق svg ، تحتاج إلى استخدام عنصر "line". يتطلب عنصر "الخط" سمتين ، "x1" و "x2" ، والتي تحدد إحداثيات x لنقطتي البداية والنهاية للخط. السمتان "y1" و "y2" غير مطلوبتين ، ولكن إذا لم يتم تحديدهما ، فسيتم تعيينهما افتراضيًا على "0".

في CodePen ، بغض النظر عما تكتبه في محرر HTML ، فإن العناصر التي تظهر في قالب HTML5 الأساسي هي عناصر HTML5. إذا كنت ترغب في إضافة فئات تؤثر على المستند بأكمله ، فهذا هو المكان المناسب للذهاب إليه. يمكن تطبيق CSS على قلمك من أي ورقة أنماط موجودة على الإنترنت. يمكنك بسهولة تغيير البرنامج النصي على القلم الخاص بك من أي مكان على الإنترنت. يمكنك تحديد عنوان URL له ، وسنقوم بإضافته بالترتيب الذي تحدده عند وضع JavaScript في القلم. سنقوم بمعالجة البرنامج النصي إذا كان يحتوي على امتداد ملف للمعالج المسبق الذي تم ربطه.

هل يمكنني إضافة فصل إلى مسار Svg؟

إن إضافة سمة class إلى عنصر html هي نفسها إضافة فئة إلى عنصر HTML. عند استخدام css ، يجب إدراج كود svg في المستند في السطر ، لكن علامة * img لن تشير إليه.

عناصر Svg والفئة

يتضمن الرسم التوضيحي التالي كلاً من عنصري "المستطيل" و "الدائرة" في عنصر SVG يسمى "الحاوية". على عنصر "rect" ، هناك سمتان "عرض" و "ارتفاع" ؛ على عنصر "الدائرة" ، هناك سمتان "نصف القطر". XMLns: xlink xmlns: xlink: http://www.w3.org/1999/xlink/xlink.html العرض = 100٪ الارتفاع = 100٪ عرض الدائرة: 50٪ ارتفاع: 50٪ نصف قطر: 10٪ تعبئة: أحمر