How do I interact with SVG elements using jQuery

This example demonstrates how to interact with SVG elements using jQuery. By using jQuery, you can easily manipulate SVG properties, handle events, and modify the appearance of SVG graphics in a straightforward manner.

jQuery, SVG, interaction, JavaScript, web development


        <svg id="mysvg" width="200" height="200">
            <circle id="mycircle" cx="100" cy="100" r="50" fill="red" />
        </svg>

        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
        <script>
            $(document).ready(function() {
                $('#mycircle').on('click', function() {
                    $(this).attr('fill', 'blue');
                });
            });
        </script>