מדריך עיצוב אתרים באמצעות 'SVG' תיבת דואר (HTML)
תיבת הדואר הנכנס היא תכונה נפוצה בעת יצירת צורות SVG . אם אתה חושב על המסמך כעל בד, תיבת התצוגה היא חלק מהבד שברצונך להציג את הצופה. למרות שהדף עשוי לכסות את מסך המחשב כולו, הדמות יכולה להתקיים רק בשליש של השלם.
תיבת הדואר הנכנס מאפשרת לך לומר למנתח להגדיל את התמונה השלישית. זה מבטל את שטח לבן נוסף. תחשוב על תיבת תצוגה כגישה וירטואלית לחתוך תמונה.
בלי זה, הגרפיקה שלך תופיע שליש הגודל האמיתי שלה.
ערכי תיבת דואר נכנס
כדי לחתוך תמונה, עליך ליצור נקודות על התמונה כדי לבצע את הקיצוצים. הדבר נכון גם בעת שימוש בתכונה תיבת תצוגה. הגדרות הערך עבור תיבת התצוגה כוללות:
- minx- ההתחלה x קואורדינטה
- miny-the y תחילת קואורדינטות
- רוחב-רוחב של תיבת התצוגה
- גובה-גובה של תיבת התצוגה
התחביר עבור ערכי תיבת התצוגה הוא:
viewBox = "0 0 200 150"
אל תבלבל את הרוחב והגובה של תיבת התצוגה עם הרוחב והגובה שהגדרת למסמך SVG . בעת יצירת קובץ SVG, אחד מהערכים הראשונים שאתה יוצר הוא רוחב המסמך וגובהו. המסמך הוא בד. תיבת התצוגה יכולה לכסות את הבד כולו או רק חלק ממנו.
תצוגה זו מכסה את כל הדף.
תצוגת תצוגה זו מכסה את מחצית הדף שמתחיל בפינה השמאלית העליונה.
לצורה שלך יש גם הקצאות גובה ורוחב.
זהו מסמך המכסה 800 x 400 px עם תיבת תצוגה שמתחילה בפינה הימנית העליונה ומרחיבה מחצית הדף. הצורה היא מלבן שמתחיל בפינה הימנית העליונה של תיבת התצוגה ומנוע 100 פיקסלים לשמאל ו- 50 פיקסלים למטה.
מדוע להגדיר תיבת דואר?
SVG עושה הרבה יותר מאשר רק לצייר צורה. זה יכול ליצור דמות אחת על גבי השני עבור אפקט צל. זה יכול לשנות צורה כך שהוא נוטה לכיוון אחד. עבור המסננים המתקדמים, יהיה עליך להבין ולהשתמש בתכונת התצוגה המפורטת.