سألني شخص ما مؤخرًا كيف أتعامل مع تصحيح أخطاء SVGs المضمنة. نظرًا لأنه جزء من DOM ، يمكننا فحص أي SVG مضمّن في أي متصفح DevTools. وبسبب ذلك ، لدينا القدرة على تحديد نطاق الأشياء وكشف أي مشكلات أو فرص محتملة لتحسين SVG.
لكن في بعض الأحيان ، لا يمكننا حتى رؤية SVGs على الإطلاق. في هذه الحالات ، هناك ستة أشياء محددة أبحث عنها عند تصحيح الأخطاء.
viewBox
القيم
1. ال • viewBox
هي نقطة ارتباك شائعة عند العمل مع SVG. من الجيد تقنيًا استخدام SVG المضمنة بدونها ، لكننا سنفقد إحدى أهم مزاياها: التحجيم باستخدام الحاوية. في الوقت نفسه ، يمكن أن تعمل ضدنا عند تكوينها بشكل غير صحيح ، مما يؤدي إلى حدوث قص غير مرغوب فيه.
العناصر موجودة عندما يتم قصها - إنها فقط في جزء من نظام الإحداثيات لا نراه. إذا أردنا فتح الملف في بعض برامج تحرير الرسومات ، فقد يبدو كالتالي:
أسهل طريقة لإصلاح هذا؟ يضيف overflow="visible"
إلى SVG ، سواء كان ذلك في ورقة الأنماط الخاصة بنا ، أو المضمنة في ملف style
أو مباشرة كسمة عرض SVG. ولكن إذا طبقنا أيضًا أ background-color
إلى SVG أو إذا كان لدينا عناصر أخرى حوله ، فقد تبدو الأشياء متوقفة قليلاً. في هذه الحالة ، سيكون الخيار الأفضل هو تحرير ملف viewBox
لإظهار ذلك الجزء من نظام الإحداثيات الذي كان مخفيًا:
هناك بعض الأشياء الإضافية حول viewBox
تستحق التغطية أثناء تناولنا للموضوع:
viewBox
العمل؟
كيف يمكن لل SVG عبارة عن لوحة غير محدودة ، ولكن يمكننا التحكم في ما نراه وكيف نراه من خلال منفذ العرض و viewBox
.
• العرض هو إطار نافذة على القماش اللانهائي. يتم تحديد أبعادها بواسطة width
و height
سمات ، أو في CSS مع ما يقابلها width
و height
الخصائص. يمكننا تحديد أي وحدة طول نريدها ، ولكن إذا قدمنا أرقامًا بدون وحدات ، فسيتم تعيينها افتراضيًا على وحدات البكسل.
• viewBox
يتم تعريفه بأربع قيم. أول نقطتين هما نقطة البداية في الزاوية العلوية اليسرى (x
و y
القيم والأرقام السالبة مسموح بها). أنا أقوم بتحريرها لإعادة صياغة الصورة. الأخيران هما عرض وارتفاع نظام الإحداثيات داخل منفذ العرض - وهذا هو المكان الذي يمكننا فيه تعديل مقياس الشبكة (الذي سندخل إليه في القسم الموجود على التكبير).
إليك ترميز مبسط يوضح SVG viewBox
و width
و height
على حد سواء تعيين السمات على <svg>
:
<svg viewBox="0 0 700 700" width="700" height="700"> <!-- etc. -->
</svg>
إعادة الصياغة
إذا هذا:
<svg viewBox="0 0 700 700">
... خرائط لهذا:
<svg viewBox="start-x-axis start-y-axis width height">
يبدأ منفذ العرض الذي نراه من حيث 0
على المحور السيني و 0
على المحور ص.
بتغيير هذا:
<svg viewBox="0 0 700 700">
…الى هذا:
<svg viewBox="300 200 700 700">
... يظل العرض والارتفاع كما هو (700
كل وحدة) ، ولكن بداية نظام الإحداثيات الآن في 300
أشر على المحور السيني و 200
على المحور ص.
في الفيديو التالي أقوم بإضافة اللون الأحمر <circle>
إلى SVG مع مركزه في 300
أشر على المحور السيني و 200
على المحور ص. لاحظ كيف يتم تغيير ملف viewBox
تؤدي الإحداثيات إلى نفس القيم أيضًا إلى تغيير موضع الدائرة إلى الزاوية العلوية اليسرى من الإطار بينما يظل الحجم الذي يتم تجسيده لـ SVG كما هو (700
×700
). كل ما فعلته هو "إعادة صياغة" الأشياء باستخدام viewBox
.
التكبير
يمكننا تغيير آخر قيمتين داخل viewBox
لتكبير الصورة أو تصغيرها. كلما كانت القيم أكبر ، تمت إضافة المزيد من وحدات SVG لتلائم منفذ العرض ، مما ينتج عنه صورة أصغر. إذا أردنا الاحتفاظ بنسبة 1: 1 ، لدينا viewBox
يجب أن يتطابق العرض والارتفاع مع قيم عرض منفذ العرض والارتفاع.
دعونا نرى ما يحدث في Illustrator عندما نغير هذه المعلمات. لوح الرسم هو viewport
والذي يمثله مربع أبيض 700 بكسل. كل شيء آخر خارج هذه المنطقة هو لوحة SVG اللانهائية الخاصة بنا ويتم قصها افتراضيًا.
يوضح الشكل 1 أدناه نقطة زرقاء عند 900
على طول المحور السيني و 900
على طول المحور ص. إذا قمت بتغيير الأخيرين viewBox
قيم من 700
إلى 900
مثله:
<svg viewBox="300 200 900 900" width="700" height="700">
... ثم عادت النقطة الزرقاء بالكامل تقريبًا إلى العرض ، كما هو موضح في الشكل 2 أدناه. تم تصغير حجم صورتنا لأننا قمنا بزيادة قيم viewBox ، لكن أبعاد العرض والارتفاع الفعلية لـ SVG ظلت كما هي ، وشقت النقطة الزرقاء طريقها مرة أخرى أقرب إلى المنطقة غير المقصوصة.
يوجد مربع وردي كدليل على كيفية تحجيم الشبكة لتناسب منفذ العرض: تصبح الوحدة أصغر ، ويتناسب عدد أكبر من خطوط الشبكة في نفس منطقة منفذ العرض. يمكنك اللعب بنفس القيم في القلم التالي لترى أن هذا العمل يعمل:
width
و height
2. مفقود الشيء الشائع الآخر الذي أراه عند تصحيح أخطاء SVG المضمّن هو ما إذا كانت العلامات تحتوي على الامتداد width
or height
صفات. هذه ليست مشكلة كبيرة في كثير من الحالات ما لم يكن SVG داخل حاوية ذات وضع مطلق أو حاوية مرنة (حيث يحسب Safari SVG width
قيمة مع 0px
بدلا من auto
). ازالة width
or height
في هذه الحالات يمنعنا من رؤية الصورة كاملة كما نرى فتح هذا العرض CodePen ومقارنتها في Chrome و Safari و Firefox (انقر فوق الصور لعرض أكبر).
الحل؟ أضف عرضًا أو ارتفاعًا ، سواء كسمة عرض أو مضمنة في سمة النمط أو في CSS. تجنب استخدام الارتفاع في حد ذاته ، لا سيما عند ضبطه على 100%
or auto
. حل آخر هو ضبط الحق و القيم اليسرى.
يمكنك اللعب مع القلم التالي واجمع بين الخيارات المختلفة.
fill
و stroke
الألوان
3. غير مقصود قد يكون أيضًا أننا نطبق اللون على <svg>
علامة ، سواء كان نمطًا مضمنًا أو قادمًا من CSS. لا بأس بذلك ، ولكن قد تكون هناك قيم ألوان أخرى في جميع أنحاء العلامة أو الأنماط التي تتعارض مع مجموعة الألوان في ملف <svg>
، مما يتسبب في أن تكون الأجزاء غير مرئية.
لهذا السبب أميل إلى البحث عن ملف fill
و stroke
السمات في ترميز SVG ومحوها. يُظهر الفيديو التالي SVG I على غرار CSS باللون الأحمر fill
. هناك بضع حالات يتم فيها ملء أجزاء SVG باللون الأبيض مباشرةً في العلامات التي أزلتها للكشف عن الأجزاء المفقودة.
4. معرفات مفقودة
قد يبدو هذا واضحًا للغاية ، لكنك ستندهش من عدد المرات التي أراه فيها. لنفترض أننا أنشأنا ملف SVG في Illustrator وكنا حريصين جدًا على تسمية طبقاتنا بحيث تحصل على معرفات مطابقة لطيفة في العلامات عند تصدير الملف. ولنفترض أننا نخطط لتصميم SVG في CSS من خلال ربط هذه المعرفات.
هذه طريقة جميلة لفعل الأشياء. ولكن هناك الكثير من الأوقات التي رأيت فيها ملف SVG نفسه يتم تصديره مرة ثانية إلى نفس الموقع وكانت المعرفات مختلفة ، عادةً عند نسخ / لصق المتجهات مباشرةً. ربما تمت إضافة طبقة جديدة ، أو تمت إعادة تسمية إحدى الطبقات الموجودة أو شيء من هذا القبيل. مهما كانت الحالة ، لم تعد قواعد CSS تطابق المعرفات في ترميز SVG ، مما يتسبب في عرض SVG بشكل مختلف عما تتوقع.
في ملفات SVG الكبيرة ، قد نجد صعوبة في العثور على تلك المعرفات. هذا هو الوقت المناسب لفتح DevTools ، وفحص ذلك الجزء من الرسم الذي لا يعمل ، ومعرفة ما إذا كانت هذه المعرفات لا تزال متطابقة.
لذلك ، أود أن أقول أنه من المفيد فتح ملف SVG مُصدَّر في محرر التعليمات البرمجية ومقارنته بالملف الأصلي قبل تبديل الأشياء. تعتبر التطبيقات مثل Illustrator و Figma و Sketch ذكية ، لكن هذا لا يعني أننا لسنا مسؤولين عن فحصها.
5. قائمة تدقيق للقص والإخفاء
إذا تم قطع SVG بشكل غير متوقع وكان ملف viewBox
الشيكات ما يرام ، وعادة ما ألقي نظرة على CSS ل clip-path
or mask
الخصائص التي قد تتداخل مع الصورة. من المغري الاستمرار في النظر إلى العلامات المضمنة ، ولكن من الجيد أن تتذكر أن تصميم SVG قد يحدث في مكان آخر.
قص وإخفاء CSS تسمح لنا "بإخفاء" أجزاء من صورة أو عنصر. في SVG ، <clipPath>
هي عملية متجهية تقطع أجزاء من الصورة بدون نتائج في منتصف الطريق. ال <mask>
العلامة هي عملية بكسل تسمح بالشفافية وتأثيرات شبه الشفافية والحواف غير الواضحة.
هذه قائمة تحقق صغيرة لحالات تصحيح الأخطاء التي تتضمن القص والإخفاء:
- تأكد من تداخل مسار القطع (أو القناع) والرسم مع بعضهما البعض. يتم عرض الأجزاء المتداخلة.
- إذا كان لديك مسار معقد لا يتقاطع مع الرسم الخاص بك ، فحاول تطبيق التحويلات حتى تتطابق.
- لا يزال بإمكانك فحص الكود الداخلي باستخدام DevTools على الرغم من أن ملف
<clipPath>
or<mask>
لا يتم تقديمها ، لذا استخدمها! - انسخ الترميز بالداخل
<clipPath>
و<mask>
ولصقه قبل إغلاق ملف</svg>
بطاقة شعار. ثم أضفfill
لتلك الأشكال وتحقق من إحداثيات SVG وأبعادها. إذا كنت لا تزال لا ترى الصورة ، فحاول الإضافةoverflow="hidden"
إلى<svg>
العلامة. - تحقق من أن أ فريد من نوعه المعرف يستخدم ل
<clipPath>
or<mask>
، وأن نفس المعرف يتم تطبيقه على الأشكال أو مجموعة الأشكال التي يتم قصها أو تقنيعها. المعرف غير المتطابق سيؤدي إلى كسر المظهر. - تحقق من وجود أخطاء إملائية في الترميز بين ملفات
<clipPath>
or<mask>
العلامات. fill
,stroke
,opacity
، أو بعض الأنماط الأخرى المطبقة على العناصر الموجودة بالداخل<clipPath>
غير مجدية - الجزء المفيد الوحيد هو هندسة منطقة التعبئة لتلك العناصر. لهذا السبب إذا كنت تستخدم ملف<polyline>
سوف تتصرف مثل ملف<polygon>
وإذا كنت تستخدم ملف<line>
لن ترى أي تأثير لقطة.- إذا كنت لا ترى صورتك بعد تطبيق ملف
<mask>
، تأكد من أنfill
محتوى التقنيع ليس أسود بالكامل. يحدد نصوع عنصر التقنيع عتامة الرسم النهائي. ستتمكن من رؤية الأجزاء الأكثر إشراقًا ، وستخفي الأجزاء الداكنة محتوى صورتك.
يمكنك اللعب بالعناصر المقنعة والمقصومة بتنسيق هذا القلم.
6. مساحات الأسماء
هل تعلم أن SVG هي لغة ترميز قائمة على XML؟ حسنا هي كذلك! تم تعيين مساحة الاسم الخاصة بـ SVG على ملف xmlns
صفة، عزا:
<svg xmlns="http://www.w3.org/2000/svg"> <!-- etc. -->
</svg>
هناك الكثير لمعرفته حول المسافات في XML و MDN لديه كتاب تمهيدي رائع عليه. يكفي القول ، أن مساحة الاسم توفر سياقًا للمتصفح ، تخبره أن الترميز خاص بـ SVG. الفكرة هي أن مساحات الأسماء تساعد في منع التعارضات عندما يكون هناك أكثر من نوع واحد من XML في نفس الملف ، مثل SVG و XHTML. هذه مشكلة أقل شيوعًا في المتصفحات الحديثة ولكنها قد تساعد في شرح مشكلات عرض SVG في المتصفحات أو المتصفحات القديمة مثل Gecko والتي تكون صارمة عند تحديد أنواع العقيدة ومساحات الأسماء.
مواصفات SVG 2 لا يتطلب تباعد الأسماء عند استخدام صيغة HTML. لكن إنه أمر بالغ الأهمية إذا كان دعم المتصفحات القديمة يمثل أولوية - بالإضافة إلى أنه لا يضر بأي شيء إضافته. بهذه الطريقة ، عندما <html>
عناصر xmlns
السمة المحددة ، فلن تتعارض في تلك الحالات النادرة.
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <body> <svg xmlns="http://www.w3.org/2000/svg" width="700px" height="700px"> <!-- etc. --> </svg> </body>
</html>
هذا صحيح أيضًا عند استخدام SVG المضمنة في CSS ، مثل تعيينها كصورة خلفية. في المثال التالي ، تظهر أيقونة علامة الاختيار على الإدخال بعد التحقق من الصحة بنجاح. هذا ما يبدو عليه CSS:
textarea:valid { background: white url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" width="26" height="26"> <circle cx="13" cy="13" r="13" fill="%23abedd8"/> <path fill="none" stroke="white" stroke-width="2" d="M5 15.2l5 5 10-12"/> </svg>') no-repeat 98% 5px;
}
عندما نزيل مساحة الاسم داخل SVG في خاصية الخلفية ، تختفي الصورة:
بادئة أخرى شائعة لمساحة الاسم هي xlink:href
. نستخدمه كثيرًا عند الإشارة إلى أجزاء أخرى من SVG مثل: الأنماط أو المرشحات أو الرسوم المتحركة أو التدرجات. التوصية هي البدء في استبدالها بـ href
حيث يتم إهمال الآخر منذ SVG 2 ، ولكن قد تكون هناك مشكلات في التوافق مع المتصفحات القديمة. في هذه الحالة ، يمكننا استخدام كليهما. فقط تذكر تضمين مساحة الاسم xmlns:xlink="http://www.w3.org/1999/xlink"
إذا كنت لا تزال تستخدم xlink:href
.
ارفع مستوى مهاراتك في SVG!
آمل أن تساعدك هذه النصائح في توفير الكثير من الوقت إذا وجدت نفسك تحرّي الخلل وإصلاحه بشكل غير صحيح في SVGs المضمنة. هذه فقط الأشياء التي أبحث عنها. ربما لديك أعلام حمراء مختلفة تراقبها - إذا كان الأمر كذلك ، أخبرني في التعليقات!
خلاصة القول هي أنه من المفيد أن يكون لديك على الأقل فهم أساسي لـ الطرق المختلفة التي يمكن بها استخدام SVG. تحديات CodePen غالبًا ما تدمج SVG وتقدم ممارسات جيدة. إليك بعض الموارد الأخرى للارتقاء بالمستوى:
هناك عدد قليل من الأشخاص أقترح اتباعهم من أجل الخير المتعلق بـ SVG:
- محتوى مدعوم من تحسين محركات البحث وتوزيع العلاقات العامة. تضخيم اليوم.
- بلاتوبلوكشين. Web3 Metaverse Intelligence. تضخيم المعرفة. الوصول هنا.
- المصدر https://css-tricks.com/6-common-svg-fails-and-how-to-fix-them/
- 1
- 1: نسبة 1
- 11
- 7
- 9
- 98
- a
- القدرة
- ماهرون
- من نحن
- مطلق
- اكشن
- وأضاف
- إضافي
- بعد
- ضد
- الكل
- يسمح
- حسنا
- و
- الرسوم المتحركة
- آخر
- تطبيقي
- التقديم
- تطبيق
- نهج
- التطبيقات
- المنطقة
- حول
- فنـون
- العمل الفني
- سمات
- الى الخلف
- خلفية
- الأساسية
- لان
- قبل
- يجري
- أقل من
- الفوائد
- أفضل
- ما بين
- كبير
- قطعة
- اسود
- الأزرق
- الملابس السفلية
- استراحة
- أكثر إشراقا
- المتصفح
- المتصفحات
- قماش
- حقيبة
- الحالات
- قط
- مما تسبب في
- مركز
- تغيير
- التغييرات
- متغير
- التحقق
- علامة الاختيار
- الشيكات
- الكروم
- دائرة
- أقرب
- إغلاق
- الكود
- اللون
- دمج
- تأتي
- آت
- مشترك
- مقارنة
- التوافق
- مجمع
- صراع
- ارتباك
- وعاء
- يحتوي
- محتوى
- سياق الكلام
- مراقبة
- رابطة
- زاوية
- المقابلة
- استطاع
- زوجان
- تغطية
- CSS
- تخفيضات
- البيانات
- صفقة
- الترتيب
- تحديد
- يحدد
- فعل
- مختلف
- صعبة
- الأبعاد
- مباشرة
- لا
- DOM
- لا
- DOT
- إلى أسفل
- رسم
- كل
- أسهل
- رئيس التحرير
- تأثير
- الآثار
- عناصر
- في مكان آخر
- تماما
- إلخ
- حتى
- كل شىء
- دليل
- مثال
- ازالة
- القائمة
- توقع
- شرح
- فشل
- قليل
- التين
- الشكل
- قم بتقديم
- ملفات
- معبأ
- مرشحات
- نهائي
- نهاية
- برنامج فايرفوكس
- الاسم الأول
- تناسب
- حل
- الأعلام
- مرن
- متابعيك
- FRAME
- تبدأ من
- بالإضافة إلى
- تماما
- دولار فقط واحصل على خصم XNUMX% على جميع
- خير
- التدرجات
- Graphic
- الرسومات
- عظيم
- شبكة
- تجمع
- يحدث
- ارتفاع
- مساعدة
- هنا
- مخفي
- إخفاء
- أمل
- كيفية
- كيفية
- HTML
- HTTPS
- جرح
- اي كون
- فكرة
- صورة
- صور
- in
- تتضمن
- دمج
- زيادة
- لا نهاية
- إدخال
- بدلًا من ذلك
- تدخل
- المشاركة
- قضية
- مسائل
- IT
- نفسها
- احتفظ
- علم
- لغة
- كبير
- أكبر
- اسم العائلة
- طبقة
- طبقات
- إرث
- الطول
- مستوى
- خط
- خطوط
- القليل
- موقع
- يعد
- بحث
- يبدو مثل
- أبحث
- تبدو
- فقد
- الكثير
- صنع
- جعل
- كثير
- قناع
- مباراة
- مطابقة
- MDN
- تعرف علي
- ربما
- مفقود
- تقدم
- الأكثر من ذلك
- أكثر
- موزيلا
- تسمية
- سلبي
- جديد
- أرقام
- واضح
- عرض
- ONE
- جاكيت
- افتتح
- افتتاح
- عملية
- الفرص
- الأمثل
- خيار
- مزيد من الخيارات
- أصلي
- أخرى
- في الخارج
- المعلمات
- جزء
- خاصة
- أجزاء
- مسار
- أنماط
- بلد
- مجتمع
- قطعة
- بكسل
- خطة
- أفلاطون
- الذكاء افلاطون البيانات
- أفلاطون داتا
- بلايستشن
- وفرة
- المزيد
- البوينت
- وضع
- محتمل
- ممارسة
- <font style="vertical-align: inherit;"> كمادة تطعيم في تجديد عيوب محيط بالذورة (الحنك) الكبيرة:</font>
- منع
- الأولوية
- البرنامج
- HAS
- الملكية
- تزود
- ويوفر
- نادر
- نسبة
- مؤخرا
- توصية مجاناً
- أحمر
- الأحمر، العلوم
- لا تزال
- بقي
- بقايا
- تذكر
- إزالة
- إزالة
- أداء
- ممثلة
- تطلب
- الموارد
- مسؤول
- مما أدى
- النتائج
- كشف
- القواعد
- سفاري
- نفسه
- حفظ
- حجم
- النطاقات
- التحجيم
- نطاق
- الثاني
- القسم
- رؤية
- طقم
- ضبط
- الأشكال
- إظهار
- يظهر
- هام
- مبسط
- منذ
- SIX
- المقاس
- صغير
- الأصغر
- سمارت
- So
- حل
- بعض
- شيء
- محدد
- مواصفة
- مربع
- بداية
- ابتداء
- يبدأ
- لا يزال
- صارم
- نمط
- ناجح
- فائق
- الدعم
- مندهش
- SVG
- بناء الجملة
- نظام
- TAG
- نقر
- •
- شيء
- الأشياء
- عبر
- طوال
- الوقت
- مرات
- نصائح
- إلى
- طن
- موضوع
- الشفافية
- صحيح
- كشف
- فهم
- وحدة
- الوحدات
- غير مرغوب فيه
- us
- تستخدم
- عادة
- التحقق من صحة
- قيمنا
- القيم
- مختلف
- فيديو
- المزيد
- مرئي
- W3
- شاهد
- طرق
- ابحث عن
- سواء
- التي
- في حين
- أبيض
- سوف
- بدون
- للعمل
- عامل
- قيمة
- سوف
- XML
- أنت
- حل متجر العقارات الشامل الخاص بك في جورجيا
- نفسك
- زفيرنت
- زوم
- التكبير