למד כיצד לסובב ב SVG

Scalable וקטור גרפיקה לסובב פונקציה

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

על סובב

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

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

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

סובב תחביר

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

להפוך = "לסובב (45,100,100)"

זווית הסיבוב היא הדבר הראשון שאתה מוסיף. בקוד זה, זווית הסיבוב היא 45 מעלות. נקודת המרכז היא מה תוסיף הבא. הנה, כי נקודת מרכז יושב בקואורדינטות 100, 100. אם אתה לא נכנס למרכז מיקום הקואורדינטות, הם ברירת המחדל ל 0,0. בדוגמה הבאה, הזווית עדיין תהיה 45 מעלות, אך מכיוון שנקודת המרכז לא הוקמה, ברירת המחדל היא 0,0.

להפוך = "לסובב (45)"

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

להפוך = "לסובב (-45)"

סיבוב של 45 מעלות הוא רבע כיוון שהזוויות מבוססות על מעגל של 360 מעלות. אם אתה רשימה המהפכה כמו 360, התמונה לא תשתנה כי אתה ממש מרפרף אותו במעגל מלא, ולכן התוצאה הסופית תהיה זהה במראה למקום שבו התחלת.