קורס Front End למתכנתים שיעור ציור בעזרת SVG מתוך JavaScript


זהו נושא דיון מלווה לערך המקורי שב־https://www.tocode.co.il/bundles/frontend/lessons/svg-javascript

שאלה; מה בקוד יוצר את ההדמיה של נפילת הכדור?

הי

הפונקציה שמטפלת בלחיצה על העיגול:

svg.addEventListener('click', function(evt) {
    const shape = evt.target;
    if (!shape.classList.contains('clickable')) {
        return;
    }

    shape.setAttributeNS(null, 'cy', 400);
});


אחראית על שינוי ערך ה y,

והקטע הבא ב CSS גורם לשינוי הזה להתבצע באנימציה:

circle { transition: all 0.5s; }