כדי לייצר סכימה דינמית, מה שמוביל אותנו זה קודם כל הגרפיקה. כיוון שאת הצד הדינמי אנחנו נממש באמצעות CSS, חשוב מאוד להכין את הגרפיקה היטב.
אם כן, יש לייצר גרפיקה ב-Illustrator עם הדגשים הבאים:
את קובץ ה-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; }
ככ