Softonic

باني مسار SVG

خطوة 1 / 2

انقر على مساحة فارغة لإضافة نقاط. اسحب النقاط لتحريكها. أزل الأخيرة باستخدام الزر.

التالي

السمة d في عنصر SVG ‏<path> لغة صغيرة خاصة بالمجال: M 10 10 L 100 10 C 120 10 120 60 100 60 Z. كل حرف أمر (moveto، lineto، منحنى بيزييه تكعيبي، إغلاق المسار)، وكل رقم إحداثي أو نقطة تحكم. يتيح لك هذا الباني النقر على اللوحة لوضع نقاط الإرساء وسحبها لإعادة التشكيل، مع مشاهدة المسار يُرسم في الزمن الفعلي. فعّل التنعيم لتحويل المقاطع المستقيمة إلى منحنيات بيزييه تكعيبية، وأغلِق الشكل، ثم انسخ سمة d المُولّدة أو ملف SVG كاملا.

كيف تبني مسارا

  1. 1

    انقر لإضافة نقاط

    كل نقرة تضع نقطة إرساء على اللوحة؛ ويصل المسار بينها بالترتيب، بدءا من `M` (moveto).

  2. 2

    اسحب لإعادة التشكيل

    اسحب أي نقطة لتحريكها، واحذف الأحدث بالزر. الحد الأدنى نقطتان.

  3. 3

    مستقيم أو ناعم

    اترك النقاط موصولة بمقاطع مستقيمة `L`، أو فعّل التنعيم لتحويلها إلى منحنيات بيزييه تكعيبية `C`.

  4. 4

    أغلِق أو اتركه مفتوحا

    فعّل إغلاق المسار لإضافة `Z` عائدا إلى البداية، أو اتركه مفتوحا لخط متعدد/حد.

  5. 5

    انسخ سمة d

    النص `d` المُولّد نظيف ومفصول بمسافات وجاهز للصق في أي SVG؛ كما يمكنك نسخ ملف SVG كاملا أو تنزيله.

ورقة مرجعية لأوامر مسار SVG

يُولّد الباني البصري أعلاه الأوامر M وL وC وZ (moveto، خط مستقيم، بيزييه تكعيبي، وإغلاق المسار). أما بقية مجموعة الأوامر أدناه فهي مرجع لقراءة أي نص d تلصقه في مكان آخر وتحريره يدويا. تستخدم الأحرف الكبيرة إحداثيات مطلقة؛ والصغيرة إزاحات نسبية من موضع القلم الحالي.

الأمر الاسم الصيغة
M / m Moveto M x y
L / l Lineto L x y
H / h Horizontal lineto H x
V / v Vertical lineto V y
C / c Cubic Bézier C x1 y1 x2 y2 x y
S / s Smooth cubic Bézier S x2 y2 x y
Q / q Quadratic Bézier Q x1 y1 x y
T / t Smooth quadratic Bézier T x y
A / a Arc A rx ry x-axis-rot lg sweep x y
Z / z Closepath Z

مثال محلول: علامة صح مدوّرة

M 4 12 L 10 18 L 20 6

ثلاثة أوامر: انتقل إلى (4, 12)، خط إلى (10, 18)، خط إلى (20, 6). أضف stroke="currentColor" stroke-width="2" stroke-linecap="round" fill="none" إلى المسار وستحصل على رمز علامة صح نظيف.

أمر القوس هو الأصعب

A rx ry x-axis-rotation large-arc-flag sweep-flag x y يأخذ سبعة أرقام:

  • rx, ry، نصفا قطري القطع الناقص
  • x-axis-rotation، دوران القطع الناقص بالدرجات
  • large-arc-flag، 0 للقوس القصير، 1 للطويل
  • sweep-flag، 0 عكس اتجاه عقارب الساعة، 1 مع اتجاهها
  • x, y، نقطة النهاية

اقلب الأعلام واحدة تلو الأخرى لترى كيف يمكن لنقطتي النهاية نفسهما الاتصال بأربع طرق مختلفة.

نصائح

  • أبقِ الأرقام صغيرة ومدوّرة. اضبط الإحداثيات على شبكة البكسل أو نصف البكسل؛ تجنب 17 منزلة عشرية.
  • فضّل الأوامر الكبيرة حين يكون مسارك مستقلا. الصغيرة (النسبية) مفيدة حين تنوي إزاحة المسار لاحقا.
  • أغلِق فقط حين تملأ. إذا كان المسار محددا بحد فقط، فإن Z لا يضيف تغييرا بصريا ويوفر بايتا.
  • مرّره عبر SVGO. تنطوي الأصفار اللاحقة والمسافات المكررة والأوامر المتكررة بشكل جميل.

الأسئلة الشائعة

الإحداثيات في d بالوحدات نفسها لـ viewBox. مسار مصمم لـ viewBox="0 0 24 24" موضوع على viewBox="0 0 100 100" سيظهر في الربع العلوي الأيسر. إما أن تقيس الإحداثيات أو تعيد تحجيم viewBox.

حين تنوي إزاحة المسار أو تكراره. تبقي الأوامر النسبية الشكل قابلا للنقل، يمكنك إضافة M جديد في أي مكان فيتحرك كل ما بعده معه.

نعم. يصبح <polyline points="0,0 10,10 20,0"> هو <path d="M 0 0 L 10 10 L 20 0" />. ويضيف المضلع Z نهائيا. تفعل معظم أدوات التحسين هذا تلقائيا لأن المسارات تُضغط بشكل أفضل.

لتأثيرات الرسم التدريجي استخدم stroke-dasharray + stroke-dashoffset في CSS. ولتحريك عنصر على طول المسار استخدم SMIL ‏<animateMotion> مع href يشير إلى معرّف المسار.

لا. تُحسب أوامر المسار في المتصفح ولا تُرسل إلى أي مكان أبدا.

أدوات ذات صلة

مولد الورق المسطر

أنشئ ورقًا مسطرًا قابلًا للطباعة مجانًا. اختر تسطيرًا جامعيًا أو واسعًا أو ضيقًا، واضبط تباعد الأسطر بالمليمتر وحجم الصفحة وخط هامش، ثم اطبع أو نزّل ملف SVG.

منتقي ألوان Material Design

تصفح لوحة ألوان Material Design وانسخ أي درجة (من 50 إلى A700) بصيغة HEX أو RGB أو HSL بنقرة واحدة.

مولّد ورق الرسم البياني

أنشئ ورق رسم بياني قابلاً للطباعة عبر الإنترنت: اختر شبكة مربّعات أو نقاطاً، واضبط التباعد بالمليمتر، وحدّد A4 أو Letter ولون خطوط مخصّصاً، ثم اطبع أو نزّل ملف SVG واضحاً.

صانع الأعلام

صمّم علماً مخصصاً بسيطاً بنسبة 3:2 في متصفحك باستخدام ستة تخطيطات وألوان ونص ورمز. نزّل SVG أو PNG، أو افتح مربع حوار الطباعة في المتصفح.

عكس ألوان الصورة

قم بعكس كل قناة من قنوات RGB في الصورة لإنتاج صورة سلبية، وهي مفيدة للتعديلات الإبداعية وعرض نسخ الأفلام المصورة.

منشئ قوائم التصنيف إلى مستويات

أنشئ قائمة تصنيف خاصة من نصوص وصور محلية، وخصص المستويات ورتب بالسحب أو لوحة المفاتيح، ثم صدّر JSON أو PNG أو SVG.

الأداة متاحة بلغات أخرى