تنسيق رسومات متجهة أو شعاعية قابلة للتمديد SVG مرحبًا بك مرة أخرى في دورة نوليدج سيتي في أوراق الأنماط المتتالية أنا كليف بروزو، مدرسك لهذه الدورة وفي درس اليوم سننظر في تنسيق رسومات متجهة قابلة للتمديد دعنا نلقي نظرة على ما سنفعله أول شيء سنستكشفه هو ما يحدث عندما تحارب CSS نفسها سنلقي نظرة على كيفية استخدام CSS تنسيقات كائنات مختلفة وتخوض معارك مع نفسها لأن الأسماء في النهاية هي نفسها ثم سنلقي نظرة على ونستكشف رسومات موجهة قابلة للتطوير سوف نستكشف ما هو مربع العرض وكيف يتيح لنا ذلك النظر في هذه الصورة التي نصنعها لن ننظر إلى الدائرة فقط لكن بعض المضلعات والمستطيلات والمسارات وبعد ذلك سنقوم بتضمين CSS الخاص بنا مباشرة في ملف رسومات متجهية قابلة للتطوير عندما أنشأنا الدائرة الدوارة الخاص ب KnowledgeCity أنشأنا صورة رسومية متجهة قابلة للتطوير وقمنا بتنسيق ذلك من خلال تعيين حجم الخط وعائلة الخطوط الوزن، وتحويل النص إلى أحرف كبيرة وضع بعض المسافات بين الحروف لإبقاء الأحرف متباعدة قليلاً عن المعتاد وملء تلك الحروف بلون هذا كل شيء في ملف SVG يعمل ملف CSS بنفس الطريقة وما كنا نفعله هو محاولة تحقيق نفس نوع التنسيق على كائن مختلف ما انتهينا إليه كان عندما تغير أحدهما، تغير الآخر أيضًا لذلك احتجنا إلى وضع CSS على الجانب الأيسر من الشاشة مباشرة في ملف SVG وهذا ما أبقاه منفصلاً عما كان موجودًا في ملف CSS أحد الأشياء التي سنفعلها شيء قد يكون ممتعًا أولا، علينا أن نفهم أنه في الأسفل في الزاوية اليسرى السفلية من الشاشة ستعطينا هذه الرسومات المتجهة صورة واضحة ونقية مهما كان حجمها على عكس الرسومات النقطية، فإن أنواع الملفات الأخرى مما سيشوه عندما نجعلها أكبر الرسومات المتجهات قابلة للتطوير تسمح بثلاثة أنواع من الكائنات الرسومية الأشكال مثل المسارات والمخططات وستكون هذه خطوطًا ومنحنيات مستقيمة بعض الصور والنصوص النقطية الآن، لحسن الحظ جميع متصفحات الويب الرئيسية لديها دعم رسومات موجهة قابلة للتمديد لذلك نحن في حالة جيدة هنا ما قررت فعله لبعض المرح هو إنتاج ثلاث علامات طريق مشتركة علامة قف، وعلامة باتجاه واحد، وعلامة خروج للطريق لنلقي نظرة علامة التوقف Stop هنا في الحقيقة مضلع وللمضلع نقاط متعددة ويتم تحديد النقاط كموقع بداية إلى أي مدى فوق أو أسفل ومن هذه النقطة، نتحرك حول علامة التوقف على سبيل المثال، 55 هو أكثر من 50 بكسل من اليسار وخمسة بكسل لأسفل من الأعلى من هذه النقطة، ننتقل إلى 100، 5 هذا 100 بكسل وخمسة بكسل من الأعلى ثم ننتقل إلى 125 فوق و 30 من الأعلى 125 فوق، 80 من الأعلى 100 فوق و 105 من الأعلى 50 فوق و 105 من الأعلى 25 فوق و 80 من الأعلى 25 فوق و 30 من الأعلى وهذا سيكمل مضلعنا إذا كان لدي جسم ثماني الأضلاع ما سأفعله هو استخلاص النقاط لجميع العلامات الثمانية الآن، سبب وجود مضلعين هنا لأن أحدهم سيكون أحمر والآخر سيكون أبيض الأحمر هو الأول التي صرحت عنها بأنها بولي أ poly A وفي CSS الخاص بي، قمت بتعريف polyA لتعبئة باللون الأحمر المضلع B هو الحد الأبيض الذي يدخل داخل المضلع الأحمر وله حد أبيض وتعبئة باللون الأحمر والخط هو الخط الفعلي لذلك عندما أرسم هذا ستلاحظ أن الجزء الأول 50 ، 5 هو في الحقيقة 52 ، 10 إذن هذه النقطة هنا هي فقط أكثر قليلاً باتجاه اليسار وخمسة بكسل لأسفل وكل رقم يزيد قليلاً وقليل من أسفل دعونا نلقي نظرة على بعض العلامات الأخرى إشارات الاتجاه الواحد عبارة عن مجموعة من المستطيلات والمضلعات الجزء الأسود من علامة الاتجاه الواحد one way التي أعطيتها حافة منحنية وهذه مستطيلات عامل rx هنا مشابه لنصف قطر الحد 25 بكسل هو نصف قطر الحد الخاص بي هذا هو السبب في أنني أحصل على زاوية مستديرة لكن رسم سهمي الأبيض هو في الحقيقة مضلع في هذه الحالة، المضلع C هو سهمي الأبيض هذا يتم تعبئته بالأبيض والمضلع C في الأسفل هنا في السطر السابع وأبدأ بـ 175 على 25 لأسفل وصولا إلى 305 على 25 أسفل 305 أكثر وخمسة لأسفل لذلك أرسم خطًا من النهاية هنا على طول الطريق ثم خط مائل إلى 360 و 45 خط مائل آخر 305 ، 85 ثم أعود للخلف 305 ، 70 وأعود إلى 175 و 70 وهذه هي الطريقة التي ترسم بها المضلع يتناسب النص في المكان المناسب أنا أملأ النص باللون الأبيض لكنني أعطيته موقع إحداثيات 38 و 70 حيث ستبدأ وأعطيه حجم خط 36 كان أكثر شيء ممتعًا هو إنشاء علامة طريق الآن سأترك هذا الأمر لثانية واحدة وأطلب منك التفكير في أيهما هو الحقيقي وأيها تم إنشاؤه باستخدام CSS و SVG حسنًا، يبدون متشابهين هم بالتأكيد يبدون متشابهين أحدهما أوضح قليلاً من الآخر وإذا خمنت أن علامة Morristown Mahwah الأصلية الذي يقع في 287 في نيو جيرسي هو الذي على اليسار، كنت على حق الشخص الموجود على اليمين هو الذي تم إنشاؤه باستخدام CSS الآن، ربما مع مزيد من العناية والخط المناسب كنت سأتمكن من تكراره بالضبط لكن ليس لدي خط الطريق الذي يستخدمه نظام الطرق السريعة بين الولايات في الولايات المتحدة لذلك أحاول تقريب الخط قدر الإمكان إذا نظرت بعناية، سترى أن حرف O في موريستاون يختلف قليلاً عن حرف O في نسختي الطريق السريع 287 سيكون صعبًا للغاية إنشاء رسومات موجهة قابلة للتمديد لها لأنه سيكون شكلًا غريبًا إنه ليس مستطيلاً، وليس دائرة وكنت سأضطر إلى إنشاء مسار أو شكل دائري يرسم هذا الرمز لي لحسن الحظ، إنه متاح على الويب كملف SVG مكتمل وكل ما يحتاجونه هو استيراده إلى المستند الخاص بي
