סטייל Scalable וקטור גרפי (SVG) עם CSS

היום אנחנו הולכים להמשיך את הדיון שלנו על Scalable Vector Graphic (SVG), וכפי שציינו בהודעה הקודמת שלנו, אחד היתרונות של שימוש SVG היא שזה יכול להיות מעוצב עם CSS.

SVG סגנונות מאפיינים

סטיילינג SVG בעצם עובד באותה צורה כמו רכיבי HTML רגילים, הם למעשה חלקו כמה תכונות נפוצות גם כן. עם זאת, ישנם מאפיינים אחרים המיועדים במיוחד עבור אובייקט SVG אשר יש מפרט משלהם מלבד CSS.

לדוגמה, ב אלמנט HTML רגיל, אנחנו יכולים להוסיף צבע רקע או עם צבע רקע או רקע כללי מאפיין CSS. ב SVG, זה קצת שונה; צבע הרקע מצוין עם למלא במקום זאת. כמו כן, הגבול של אלמנט מוגדר עם שבץ רכוש ולא עם גבול כמו שעשינו ב- HTML רגיל, אתה יכול לראות את הרשימה המלאה כאן.

אם אתה עובד עם עורך וקטור כמו Adobe Illustrator די ארוך, אתה יכול לנחש במהירות כי מנגנון שם הנכס SVG הוא שמקורו בעורך.

סגנון יישום SVG

אנו יכולים להשתמש באחת הדרכים הבאות לסגנון אלמנט SVG;

תכונות מצגת

אם ראית את כל המאפיינים של SVG, כל אחד מהם ניתן להוסיף ישירות על האלמנט כדי לשנות את המצגת של האלמנט. הדוגמה הבאה מראה כיצד ניתן להוסיף למלא ו שבץ רכוש ישירות על rect רכיבים

המלבן יתברר כמו צילום המסך למטה;

גיליון סגנון מוטבע

אנחנו יכולים גם להוסיף סגנון עם בסגנון תכונה. בדוגמה הבאה גם נוסיף למלא ו שבץ אל ה rect, אבל הפעם אנחנו מוסיפים את זה בתוך בסגנון ולסובב אותו עם CSS3 שינוי צורה רכוש, כך;.

המלבן יסתובב באותה תוצאה, רק שזה עכשיו גם מסובב;

גיליון סגנונות פנימי

הטמע את סגנון SVG בתוך בסגנון אלמנט הוא גם אפשרי ולא שונה איך עשינו את זה ב- HTML רגיל. הדוגמה הבאה מציגה כיצד אנו מוסיפים סגנונות פנימיים כדי להשפיע על רכיבי SVG .HTML מסמך.

עם זאת, SVG היא שפה מבוססת XML, לכן כאשר אנו עומדים להוסיף גיליון סגנונות בתוך .svg מסמך, אנחנו צריכים לשים את ההצהרה סגנונות בפנים cdata, כדלהלן;

ה cdata כאן נדרש, מאז CSS יכול להיות > אופי שיתנגש עם מנתחי XML. שימוש cdata מומלץ מאוד עבור סגנון הטבעה ב- SVG, גם אם התו המתנגש לא ניתן בגיליון הסגנונות.

גיליון סגנונות חיצוני

גיליון הסגנונות החיצוני פועל גם באותו אופן עבור רכיבי SVG .HTML מסמך.

שוב ב .svg מסמך, אנחנו צריכים להפנות את הסגנון חיצוני גיליון כמו xml-stylesheet, ככה.

קיבוץ אלמנטים

רכיבי SVG ניתן לקבץ עם אלמנט. רכיבי הקבצה יאפשרו לנו לשתף סגנונות משותפים לכל האלמנטים בקבוצה, הנה דוגמה;

הן המלבן והן המעגל יהיו בעלי אותה תוצאה.

מחשבה סופית

יש לנו את כל הדברים החשובים על עיצוב SVG עם CSS וזה רק אחד היתרונות של הצגת גרפיקה עם SVG. ב פוסט הבא נסתכל לתוך עוד אחד נוסף, אז תישאר מכוון.

• הצג הדגמה
• הורד מקור