كيفية إنشاء مسارات معقدة في SVGs

لقد نظرنا إلى ما هي SVGs وعناصر الرسم الأساسية. لكن معظم الصور تتجاوز الخطوط البسيطة والمستطيلات والأشكال البيضاوية ، وهذا عندما تصبح معرفة كيفية إنشاء مسارات معقدة في SVGs أمرًا مهمًا.

ملف SVG path جزء أكثر تقدمًا بكثير. يمكن القول إنه العنصر الوحيد الذي تحتاجه لأنه يمكنه رسم أي شكل تريده. ومع ذلك ، هناك عيب واحد ، وأفضل توضيح بمثال:

<path d="M500,500 L500,20 A480,480 0 0,1 968,607 z" />

يبدو معقدًا ويمكن أن يكون من الصعب متابعته.

يتطلب عنصر المسار ملفًا واحدًا d سمة ذات قيمة سلسلة تحتوي على قائمة بإرشادات الرسم المشفرة. إنه ليس معقدًا مثل التعبير العادي ، ولكن من السهل أن تضيع في غابة الأرقام.

يتم تشكيل سلسلة الرسم باستخدام سلسلة من الأوامر المحددة بحرف كبير أو صغير. يتبع الحرف صفر أو أكثر من الوسيطات التي تنطبق على هذا الأمر المحدد. على سبيل المثال ، يستخدم المسار التالي ملف M الأمر لنقل ملف قلم SVG إلى نقطة البداية عند 500500 دون رسم خط:

<path d="M500,500" />

ملف SVG viewBox السمة تؤثر على موقع القلم داخل الصورة نفسها. باستخدام 500,500 المثال أعلاه ، سيكون القلم:

  • تتمركز أفقيًا وعموديًا عند استخدام SVG viewBox="0 0 1000 1000"
  • في أعلى اليسار عندما viewBox="500 500 1000 1000"
  • وضعها في أسفل اليمين عندما viewBox="-500 -500 1000 1000"
  • خارج المنطقة المرئية عندما viewBox="0 0 400 400".

وبالمثل ، حرف صغير m يحرك القلم بالنسبة إلى موقعه الحالي – على سبيل المثال ، 50 وحدات اليسار و 100 عدد الوحدات:

<path d="m50,-100" />

خطوط الرسم متشابهة: L يرسم خطًا للإحداثيات المطلقة ، و l (أحرف صغيرة L) يرسم خطًا متعلقًا بالموقع الحالي. لذلك فإن المسارات التالية متطابقة:

<path d="M500,500 L100,600" />
<path d="M500,500 l-400,100" />

H و h رسم خطوط أفقية إلى المطلق أو النسبي x الموقع وفقًا لذلك. فمثلا:

<path d="M500,500 H800" />
<path d="M500,500 h300" />

نقاط المكافأة إذا كنت تستطيع تخمين ماذا V و v فعل …

<path d="M500,500 V400" />
<path d="M500,500 v-100" />

أخيرا، Z أو z أغلق المسار برسم خط من النقطة الحالية إلى نقطة البداية. بشكل طبيعي، Z سيكون الأمر الأخير في السلسلة الخاصة بك ، على الرغم من أنه من الممكن إنشاء سلاسل ذات مسارات فرعية متعددة. فمثلا:

<path d="M500,500 L500,200 L800,500 z M400,600 L400,900 L100,600 z" />

النتيجة في الصورة أدناه.

مسارات SVG

يمكن تصميم مسارات SVG باستخدام CSS أو يمكنك إضافتها stroke، stroke-width، fill والسمات الأخرى على النحو المطلوب.

هذه هي خيارات المسار السهل. أصبح الأمر الآن معقدًا بشكل مذهل. النظر في A/a الأمر الذي يرسم قوسًا (قسمًا) من القطع الناقص باستخدام المعلمات التالية:

A rx ry x-axis-rotation large-arc-flag sweep-flag x y

في هذا المثال:

  • rx هل القطع الناقص x نصف القطر
  • ry هو نصف قطر القطع الناقص y
  • x-axis-rotation هو عدد درجات تدوير القطع الناقص
  • large-arc-flag يكون 0 لأصغر قوس أو 1 لأكبر
  • sweep-flag يكون 0 للزوايا الموجبة أو 1 للسالب (فوق أو تحت الخط)
  • x y هي نقطة نهاية القوس

قد يكون من الصعب تصور الأقواس ، ولكن هذا أداة Codepen arc سوف يساعد.

ومع ذلك ، فإن استخدام الأقواس محدود ، لذا تقدم مسارات SVG أيضًا:

المصدر

أضف تعليق