בניית דיאגרמה / סכימה SVG דינמית (עם אנימציות)

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

אם כן, יש לייצר גרפיקה ב-Illustrator עם הדגשים הבאים:

1. ניקיון: לא לשמור קווי מתאר (לעשות להם Expand)
2. חלוקה לקבוצות: לקבץ חלקים לקבוצות (בהמשך זה ישמש אותנו לביצוע האנימציות)
3. פיצול לשכבות: כל קבוצה שצריכה לעבור אנימציה – יש לשבץ בשכבה משלה, ולכלול שכבת BKG כללית מתחת לכל החלקים.
4. לשמור גם כגרסת ai לטובת שינויים, וגם כ-SVG (הקובץ הווקטורי שאיתו נעבוד)

את קובץ ה-SVG יש לערוך כדי להעתיק את תוכנו – באופן מלא – לאלמנט Column.

כדי להוסיף קישורים, יש להוסיף את הקוד הבא מיד אחרי ה-<g> הראשון בשכבה (זה עם ה-ID):

<a xlink_href="https://www.google.co.uk/" target="_self">

כאשר יש לעדכן את הקישור, ואם זה אמור להיפתח בחלון חדש לעדכן את ה-self ל-blank. כמו כן, יש לסגור את הקישור ממש לפני ה-</g> האחרון של אותה שכבה:

</a>

כעת ניתן לערוך CSS עבור קובץ ה-SVG הפרוש, תוך שימוש בשמות השכבות לבחירה קלה יותר, כך לדוגמא:

#Q1:hover .st2 {
 fill:white;
}
#Q1:hover .st3 {
 fill:#344c9a;
}
#Q1:hover .st0 {
 fill:#344c9a;
}
#C1:hover .st1 {
 fill:white;
 stroke:#344c9a;
 stroke-width:6px;
}
#Q1 .st0 {
 fill:#587BC2;
}

כאשר כדי לוודא שיש אנימציה "רכה" במעבר – זמן מעבר – יש להוסיף לכל הסלקטורים (עם ובלי ה-hover) אשר בשימוש, כך:

#Q1:hover .st2, #Q1:hover .st3, #Q1:hover .st0, #Q1 .st2, #Q1 .st3, #Q1 .st0 {
 -webkit-transition: all .3s ease-in-out;
 transition: all .3s ease-in-out;
}

ככ