עבודה עם טקסט ב- Scalable Vector Graphics (SVG)

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

אז בואו נבדוק אותם.

יישום בסיסי

אבל, לפני שנמשיך הלאה, בואו נראה איך טקסט ב- SVG נוצר ברמה הבסיסית ביותר שלו:

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

מקור תמונה: ויקיפדיה

והנה איך ייראה הטקסט. לעת עתה נראה שאין לה הבדל עם טקסט רגיל ב- HTML.

בסיסי טקסט סגנונות

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

מודגש

 זהו טקסט ב- Scalable Vector Graphic (SVG) 

נטוי

 זה טקסט נטוי ב- Scalable Vector Graphic (SVG) 

קו תחתון

 זה טקסט מודגש ב Scalable Vector Graphic (SVG) 

אלמנט

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

 זה מודגש, זה נטוי ו זה מודגש 

מצב כתיבה

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

 ぁ ぃ ぅ ぇ ぉ か き  

בדוגמה לעיל, שמנו כמה תווים יפניים אקראיים (לא שואלים אותי את המשמעות שלהם, אני באמת אין לי מושג) ולשנות את הכיוון עם הצהרת סגנון זה, מצב כתיבה: tb, איפה tb הוא עומד מלמעלה למטה.

מתאר טקסט

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

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

נתיב טקסט

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

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

לאחר מכן, שים את אלמנט בתוך אלמנט. מגדיר כאן פירושו הגדרה.

שימו לב שהוספנו גם id רכוש post . עכשיו, אנחנו רק צריכים לקשר את הנתיב id לטקסט שלנו אלמנט, כך;

    לורם ipsum dolor לשבת.   

לקריאה נוספת: נתיבי SVG

מעבר צבע

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

ראשית, אנחנו צריכים להגדיר את צבעי צבע.

כאשר כל ההגדרות הדרושות מוגדרות, עכשיו אנחנו רק צריכים להוסיף את הטקסט ולהתייחס למלא התכונה של הדרגתי id תכונה, כדלקמן;

 מעבר צבע 

והנה זה, את הטקסט עם שיפוע.

לקריאה נוספת: SVG מדגם ו דפוס

הפניות נוספות

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

• על גופנים ב SVG - Divya Manian
• טקסט רשמי של SVG - W3.org
• SVG Dovumentation ב מוזילה Dev. רשת עם דוגמאות וכלים - MDN
• SVG מצב כתיבת מצב - MDN

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