تحلل دائرة SVG إلى المسارات

تبدأ هذه المقالة باعتراف: أحب كتابة رمز SVG يدويًا. ليس هذا هو الحال دائمًا ولكن غالبًا ما يبدو غريبًا للأشخاص الذين لا يشاركوني ميولي. هناك عدد كبير من الفوائد في القدرة على كتابة SVG يدويًا ، مثل تحسين SVGs بطرق لا تستطيع الأداة (تحويل المسار إلى مسار أو شكل أبسط) ، أو ببساطة عن طريق فهم كيفية عمل مكتبات مثل D3 أو Greensock .

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

أولاً (آمل أن تكون قد رأيت دائرة أساسية في SVG من قبل) ، إليك قلمًا يظهر واحدة:

يمكن عمل الكثير من الأشياء باستخدام الدائرة: يمكن تحريكها وتطبيق ألوان مختلفة عليها. مع ذلك ، هناك شيئان جميلان جدًا لا يمكنك عمل دائرة في SVG 1.1: لا يمكنك جعل عنصر رسومي آخر يتحرك على طول مسار الدائرة (باستخدام عنصر animateMotion ) ولا يمكنك تشكيل نص على طول مسار الدائرة (هذا سوف يُسمح فقط بعد إصدار SVG 2.0).

تحويل دائرتنا إلى مسار

هناك أداة صغيرة عبر الإنترنت يمكن أن تساعدك في إنشاء مسارات خارج الدوائر (يمكنك تجربتها هنا) ، لكننا سنقوم بإنشاء كل شيء من الصفر حتى نتمكن من معرفة ما يحدث بالفعل وراء الكواليس.

لعمل مسار دائري ، سنقوم في الواقع بعمل قوسين ، أي أنصاف دائرة تكمل الدائرة في مسار واحد. كما لاحظت على الأرجح في SVG أعلاه ، فإن السمات CX و CY و R على التوالي تحدد مكان رسم الدائرة على طول المحور X و Y ، بينما تحدد R نصف قطر الدائرة. ينشئ كل من CX و CY مركز الدائرة ، لذلك يتم رسم الدائرة حول تلك النقطة.

قد يبدو تكرار هذه الدائرة كما يلي:

 <path d=" M (CX - R), CY a R,R 0 1,0 (R * 2),0 a R,R 0 1,0 -(R * 2),0 " />

لاحظ أن CX هو نفس سمة cx للدائرة ؛ الشيء نفسه ينطبق على CY cy للدائرة ، وكذلك R والسمة r للدائرة. يتم a الحرف الصغير لتحديد جزء من قوس بيضاوي. يمكنك استخدام حرف Z (أو z ) اختياري لإغلاق المسار.

يشير الحرف الصغير a إلى بداية قوس بيضاوي مرسوم نسبيًا إلى الموضع الحالي - أو في حالتنا المحددة:

 <path d=" M 25, 50 a 25,25 0 1,1 50,0 a 25,25 0 1,1 -50,0 " />

يمكنك أن ترى السحر يحدث في هذا القلم:

مخفية أسفل المسار دائرة ذات تعبئة حمراء. أثناء اللعب بقيم المسار ، سترى تلك الدائرة طالما أن المسار يغطي الدائرة بالكامل (المسار نفسه عبارة عن دائرة من نفس الحجم) ، وسنعلم أننا نقوم بالأشياء بشكل صحيح .

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

يمكنك تجربة ذلك بالقلم أعلاه عن طريق إزالة الثانية a المسار:

 a 25,25 0 1,1 50,0 25,25 0 1,1 -50,0

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

كيف يعمل هذا المسار

أولاً ، ننتقل إلى إحداثيات X,Y موضوعة تمامًا في الصورة. إنه لا يرسم أي شيء هناك - إنه يتحرك هناك فقط. تذكر أنه بالنسبة لعنصر الدائرة CX ، يشير CY إلى مركز الدائرة ؛ ولكن كما يحدث في القوس البيضاوي ، سيتم حساب CX و CY الحقيقيين للقوس من الخصائص الأخرى لذلك القوس.

بعبارة أخرى ، إذا أردنا أن يكون CX عند 50 ونصف قطرنا 25 ، فعلينا الانتقال إلى 50 - 25 (إذا كنا نرسم من اليسار إلى اليمين بالطبع). هذا يعني أن القوس الأول مرسوم من 25 X, 50 Y مما ينتج عنه أن القوس الأول هو 25,25 0 1,0 50,0 .

دعنا نقسم ما تعنيه القيمة 25,25 0 1,0 50,0 للقوس في الواقع:

• 25 : نصف القطر X النسبي للقوس ؛
• 25 : نصف قطر القوس النسبي ص ؛
• 0 1,0 : لن أتحدث عن القيم الوسطى الثلاث (التدوير ، وعلم القوس الكبير ، وخصائص علم المسح) لأنها ليست مهمة جدًا في سياق المثال الحالي طالما أنها هي نفسها لكلا القوسين ؛
• 50 : إحداثي X النهائي (نسبي) للقوس ؛
• 0 : إحداثيات النهاية Y (نسبي) للقوس.

القوس الثاني هو 25,25 0 1,0 -50,0 . ضع في اعتبارك أن هذا القوس سيبدأ في الرسم من أي مكان توقف فيه القوس الأخير عن الرسم. بالطبع ، نصف القطر X و Y متماثلان ( 25 ) ، لكن الإحداثي X للنهاية هو -50 من حيث يكون الإحداثي الحالي.

من الواضح أنه كان من الممكن رسم هذه الدائرة بعدة طرق مختلفة. تُعرف عملية تحويل الدائرة إلى مسار بالتحلل. في مواصفات SVG 2 ، سيتم تفكيك الدائرة بأربعة أقواس ، ومع ذلك ، فإن الطريقة التي توصي بها غير ممكنة للاستخدام حتى الآن ، لأنها تعتمد حاليًا على ميزة تسمى المسار القريب لإكمال المقطع والذي لم يتم تحديده بعد.

لكي أريكم أنه يمكننا رسم الدائرة بعدة طرق ، أعددت قلمًا صغيرًا بأمثلة مختلفة:

إذا ألقيت نظرة فاحصة ، فسترى دائرتنا الأصلية مع خمسة أمثلة مختلفة لكيفية رسم المسارات أعلى تلك الدائرة. يحتوي كل مسار على عنصر desc يصف استخدام قيم CX و CY و R لبناء الدائرة. المثال الأول هو المثال الذي ناقشناه هنا بينما يستخدم ثلاثة آخرون متغيرات يجب أن تكون مفهومة من قراءة الكود ؛ تستخدم الأمثلة الأخيرة أربعة أقواس نصف دائرية بدلاً من اثنين ، مما يكرر إلى حد ما العملية الموضحة في مواصفات SVG 2 المرتبطة أعلاه.

يتم وضع الدوائر فوق بعضها البعض باستخدام فهرسة z الطبيعية الخاصة بـ SVG لوضع العناصر التي تأتي لاحقًا في العلامات فوق العناصر التي تأتي سابقًا.

إذا قمت بالنقر فوق المسارات الدائرية في القلم ، فستقوم النقرة الأولى بطباعة كيفية هيكلة المسار إلى وحدة التحكم وإضافة فئة إلى العنصر بحيث ترى لون الحد الخاص بكيفية رسم الدائرة (يمكنك أن ترى أن الدائرة الأولى مرسومة بإسفين بداية من السكتة الدماغية). ستؤدي النقرة الثانية إلى إزالة الدائرة حتى يكون لديك القدرة على التفاعل مع الدائرة أدناه.

كل دائرة لها لون تعبئة مختلف ؛ عنصر الدائرة الفعلي أصفر وسيظهر "لقد نقرت على الدائرة" لوحدة التحكم كلما تم النقر عليها. يمكنك أيضًا ، بالطبع ، قراءة الكود ببساطة لأن عناصر desc واضحة تمامًا.

الذهاب من مسار إلى دائرة

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

يُنصح بالقراءة : " نصائح لإنشاء وتصدير صور SVG أفضل للويب" بقلم سارة سويدان

لنأخذ SVG التالي من ويكيبيديا كمثال. عندما تنظر إلى الكود الخاص بهذا الملف ، سترى أنه يحتوي على الكثير من أدوات التحرير بمجرد تشغيله من خلال Jake Archibald's SVGOMG! (والذي يمكنك قراءة المزيد عنه هنا) ، ستنتهي بشيء مثل الملف التالي الذي تم تحسينه إلى حد كبير ولكن لا تزال الدوائر في المستند تُعرض كمسارات:

لذا ، دعنا نرى ما إذا كان بإمكاننا معرفة ما يجب أن تكون عليه هذه الدوائر إذا كانت عناصر دائرة فعلية بالنظر إلى ما نعرفه عن كيفية عمل المسارات. من الواضح أن المسار الأول في المستند ليس دائرة بينما المساران التاليان (يظهران فقط سمة d ):

 M39 20a19 19 0 1 1-38 0 19 19 0 1 1 38 0z

 M25 20a5 5 0 1 1-10 0 5 5 0 1 1 10 0z

لذا ، تذكر أنه يمكن ترك الثانية a ، فلنعيد كتابتها لجعلها أكثر منطقية. (المسار الأول هو الدائرة الكبيرة).

 M39 20 a19 19 0 1 1-38 0 a19 19 0 1 1 38 0z

ومن الواضح أن هذه الأقواس هي كما يلي:

 aR R 0 1 1 - (R * 2) 0 aR R 0 1 1 (R * 2) 0

هذا يعني أن نصف قطر دائرتنا هو 19 ، لكن ما هي قيم CX و CY ؟ أعتقد أن M39 بنا هو في الواقع CX + R ، مما يعني أن CX يساوي 20 و CY يساوي 20 أيضًا.

لنفترض أنك أضفت دائرة بعد كل المسارات مثل هذا:

 <circle fill="none" stroke-width="1.99975" stroke="red" r="19" cx="20" cy="20" />

سترى أن هذا صحيح ، وأن الدائرة الحمراء المخططة تغطي بالضبط الدائرة الكبيرة. يبدو مسار الدائرة الثانية المعاد صياغته كما يلي:

 M25 20 a5 5 0 1 1-10 0 5 5 0 1 1 10 0z

من الواضح أن نصف القطر يساوي 5 ، وأراهن أن قيم CX و CY الخاصة بنا هي نفسها كما كانت من قبل: - 20 .

ملاحظة : إذا كان CX = 20 ، فإن CX + R = 25 . تقع الدائرة داخل الدائرة الأكبر في المركز ، لذا من الواضح أنه يجب أن يكون لها نفس قيم CX و CY .

أضف الدائرة التالية في نهاية المسارات:

 <circle fill="yellow" r="5" cx="20" cy="20" />

يمكنك الآن أن ترى أن هذا صحيح من خلال إلقاء نظرة على القلم التالي:

الآن بعد أن عرفنا ما يجب أن تكون عليه الدوائر ، يمكننا إزالة تلك المسارات غير الضرورية وإنشاء الدوائر بالفعل - كما ترون هنا:

استخدام مسارنا الدائري لتغليف النص

والآن بعد أن أصبح لدينا دوائر في المسارات ، يمكننا التفاف النص على تلك المسارات. يوجد أدناه قلم بنفس المسارات مثل قلمنا السابق "كل الدوائر" ، ولكن بنص ملفوف على المسار. عندما تنقر على مسار ، سيتم حذف هذا المسار ويلتف النص على المسار التالي المتاح ، مثل:

بالنظر إلى المسارات المختلفة ، سترى اختلافات طفيفة بين كل مسار (المزيد عن ذلك قليلاً) ، ولكن أولاً هناك القليل من عدم التوافق عبر المتصفح الذي يمكن رؤيته - يمكن ملاحظته بشكل خاص في المسار الأول:

	مطور Firefox
	كروم
	مايكروسوفت إيدج

السبب في أن البداية "S" لـ "Smashing" تجلس في تلك الزاوية المضحكة في حل Firefox هو أنها المكان الذي بدأنا فيه بالفعل رسم مسارنا (بسبب الأمر vR الذي استخدمناه). هذا أكثر وضوحًا في إصدار Chrome حيث يمكنك أن ترى بوضوح أول وتد على شكل دائري من دائرتنا التي رسمناها:

لا يتبع Chrome جميع الأوتاد ، لذا فهذه هي النتيجة عندما تقوم بتغيير النص إلى "Smashing Magazine".

والسبب هو أن Chrome لديه خطأ فيما يتعلق بميراث سمة textLength المُعلنة في عنصر text الأصل. إذا كنت تريد أن يظهر كلاهما بنفس الشكل ، فضع سمة textLength على عنصر textPath بالإضافة إلى النص. لماذا ا؟ لأنه اتضح أن Firefox Developer لديه نفس الخطأ إذا لم يتم تحديد سمة textLength في عنصر text (كان هذا هو الحال منذ عدة سنوات حتى الآن).

يحتوي Microsoft Edge على خطأ مختلف تمامًا ؛ لا يمكنه التعامل مع المسافة البيضاء بين Text وعنصر TextPath . بمجرد إزالة المسافة البيضاء ، ووضع السمة textLength على كل من عنصري text و textPath ، ستبدو جميعها متشابهة نسبيًا (مع اختلافات صغيرة بسبب الاختلافات في الخطوط الافتراضية وما إلى ذلك). لذلك ، هناك ثلاثة أخطاء مختلفة على ثلاثة متصفحات مختلفة - وهذا هو سبب تفضيل الناس غالبًا للعمل مع المكتبات!

يوضح القلم التالي كيف يمكن إصلاح المشكلات:

لقد قمت أيضًا بإزالة ألوان التعبئة المختلفة لأنها تسهل رؤية التفاف النص. تعني إزالة ألوان التعبئة أن وظيفتي الصغيرة للسماح لك بالتنقل عبر المسارات ومعرفة كيف تبدو لن تعمل إلا إذا قمت بإضافة سمة pointer-events="all" ، لذلك أضفتها أيضًا.

ملاحظة : يمكنك قراءة المزيد حول أسباب ذلك في "إدارة تفاعل SVG مع خاصية أحداث المؤشر" التي أوضحها تيفاني ب. براون.

لقد ناقشنا بالفعل التفاف المسار متعدد المسارات ، لذلك دعونا الآن نلقي نظرة على المسارات الأخرى. نظرًا لأن لدينا مسارًا واحدًا نلتف حوله ، فسينتقل النص دائمًا في نفس الاتجاه.

صورة	طريق	تفسير
	M CX, CY a R, R 0 1,0 -(R * 2), 0 a R, R 0 1,0 R * 2, 0 ويستخدم وظيفة translate للتحرك +R على المحور X.	يتم تحديد موضع البداية لـ textPath (بما أننا لم نحدده بأي شكل من الأشكال) من خلال قوس النهاية الأول لدينا -(R * 2) ، بالنظر إلى نصف قطر القوس نفسه.
	M (CX + R), CY a R,R 0 1,0 -(R * 2),0 a R,R 0 1,0 (R * 2),0	نفس الشيء ينطبق على المسار السابق.
	M CX CY m -R, 0 a R,R 0 1,0 (R * 2),0 a R,R 0 1,0 -(R * 2),0	نظرًا لأننا ننتهي عند (R * 2 ) في القوس الأول ، فمن الواضح أننا سنبدأ في الموضع المعاكس. بعبارة أخرى ، يبدأ هذا من حيث انتهى طريقنا السابقان.
	M (CX - R), CY a R,R 0 1, 1 (R * 2),0 a R,R 0 1, 1 -(R * 2),0	يبدأ هذا في نفس الموضع مثل الموضع الأخير بسبب (R * 2) ، لكنه يعمل في اتجاه عقارب الساعة لأننا قمنا بتعيين خاصية علامة المسح (المميزة باللون الأصفر) على 1 .

لقد رأينا كيفية التفاف النص على مسار واحد في دائرة. دعنا الآن نلقي نظرة على كيفية تقسيم هذا المسار إلى مسارين والفوائد التي يمكنك الحصول عليها من ذلك.

كسر مساراتنا إلى أجزاء

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

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

لنفترض أن دائرتنا هي CX 295, CY 200, R 175 . الآن ، باتباع طريقة المسار الدائري ، نرى الآن ما يلي:

 M (CX - R), CY a R,R 0 1,1 (R * 2),0 a R,R 0 1,1 -(R * 2),0 

لن أتحدث عن المسار أو حجم النص أو لون التعبئة أو الحد. يجب علينا جميعًا أن نفهم ذلك الآن ، وأن نكون قادرين على جعله ما نريده أن يكون. ولكن من خلال النظر إلى النص ، يمكننا أن نرى بعض الجوانب السلبية أو القيود على الفور:

• النص كله يسير في اتجاه واحد ؛
• قد يكون من الجيد أن يكون هناك جزء من النص خلف الجمشت ، لا سيما حيث تقول مجلة. من أجل جعل الخطين "M" و "E" في الدائرة ، يجب أن يكون الحرف "A" على الجانب السفلي من الجمشت ، والذي يبدو نوعًا ما غير متوازن بطريقة أخرى. (أشعر أنه يجب وضع الحرف "A" بدقة والإشارة إلى أسفل عند هذه النقطة).

إذا أردنا إصلاح هذه المشكلات ، فنحن بحاجة إلى تقسيم مسارنا الفردي إلى قسمين. في القلم التالي ، قمت بفصل المسار إلى مسارين ، (ووضعتهم في منطقة defs من SVG للإشارة إلى textPath الخاص بنا):

مرة أخرى ، بافتراض أن CX الخاص بنا هو 295, CY 200, R 175 ، فإن المسارين يكونان بالتنسيق التالي (للمسار نصف الدائري العلوي):

 M (CX - R), CY a R,R 0 1,1 (R * 2),0

وما يلي للقاع:

 M (CX + R), CY a R,R 0 1,1 -(R * 2),0

ومع ذلك ، لا يزال لدينا نص دائري يتحرك جميعًا في نفس الاتجاه. لإصلاح ذلك لكل شيء ما عدا Edge ، كل ما عليك فعله هو إضافة سمة side="right" إلى عنصر text الذي يحتوي على مسار النص " textPath ".

جعل النص يذهب في اتجاه آخر

إذا أردنا دعم أكبر عدد ممكن من المتصفحات ، فعلينا تغيير المسار وعدم الاعتماد على السمة side غير المدعومة بالكامل. ما يمكننا القيام به هو نسخ مسار نصف الدائرة العلوي ، ولكن تغيير المسح من 1 إلى 0 :

قبل:

 M 120, 200 a 175,175 0 1, M 120, 200 a 175,175 0 1, 1 350,0 350,0

بعد:

 M 120, 200 a 175,175 0 1, M 120, 200 a 175,175 0 1, 0 350,0 350,0

لكن نصنا الآن مرسوم على الدائرة الداخلية المحددة بواسطة المسح ولن يبدو لطيفًا في المتصفحات المختلفة. هذا يعني أنه سيتعين علينا تحريك موضع مسارنا لمحاذاة "S" من "Smashing" ، وجعل نهاية X للمسار أكبر ، وتعيين بعض الإزاحة للنص. كما ترى ، هناك أيضًا اختلاف بسيط في النص بين Firefox والآخرين والذي يمكننا تحسينه عن طريق زيادة سمة textLength في عنصر text ، وكذلك إزالة المسافة البيضاء من textPath (نظرًا لأن Firefox يعتقد بوضوح أن المسافة البيضاء ذات مغزى).

الحل:

قم بتغيير الفهرس Z لجزء من نصنا الدائري

أخيرًا ، نريد أن نجعل نصنا يمر أمام وخلف الجمشت. حسنًا ، هذا سهل. تذكر أن فهرسة SVG للعنصر تستند إلى مكان وجودها في الترميز؟ لذلك إذا كان لدينا عنصران ، فسيتم رسم العنصر 1 خلف العنصر 2 . بعد ذلك ، كل ما يتعين علينا القيام به هو تحريك عنصر text لأعلى في ترميز SVG الخاص بنا بحيث يتم رسمه قبل الجمشت.

يمكنك أن ترى النتيجة أدناه حيث يتم إخفاء أجزاء من كلمة "مجلة" بواسطة النقطة السفلية من الجمشت.

إذا ألقيت نظرة على الترميز ، يمكنك أن ترى أنه تم نقل نصف الدائرة السفلي للنص ليكون قبل المسار الذي يرسم الجمشت.

تحريك أجزاء دائرتنا

إذن لدينا الآن القدرة على عمل نص دائري عن طريق التحكم تمامًا في اتجاه أجزاء النص عن طريق وضع النص في نصف دائرة. يمكن بالطبع استغلال ذلك لعمل رسوم متحركة للنص. إن عمل رسوم SVG المتحركة عبر المستعرضات هو موضوع مقال آخر (أو الكثير من المقالات). ستعمل هذه الأمثلة فقط في Chrome و Firefox بسبب استخدام بنية SMIL-animations بدلاً من CSS keyframes أو أدوات مثل Greensock. لكنه يعطي مؤشرًا جيدًا للتأثيرات التي يمكنك تحقيقها من خلال تحريك الدائرة المتحللة.

خذ القلم التالي:

يرجى الضغط على زر "إعادة التشغيل" الموجود في لوحة الشفرة لمشاهدة الرسوم المتحركة أثناء العمل. يبدأ الجزءان من النص الدائري في التحريك في نفس الوقت ، لكن لهما مدة مختلفة ، لذا ينتهي بهما في أوقات مختلفة. نظرًا لأننا نقوم بتحريك السمة textLength ، فقد وضعنا animate متحركين تحت كل نص - أحدهما لعنصر text (لذا سيعمل Firefox) والآخر لعنصر textpath (لذلك سيعمل Chrome).

خاتمة

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

مزيد من القراءة على SmashingMag:

• إعادة التفكير في SVG المستجيب
• تحريك ملفات SVG باستخدام SVGator
• تصميم وتحريك صور SVG باستخدام CSS
• إدارة تفاعل SVG مع خاصية أحداث المؤشر