How to select path tag from svg file in img tag?

Question

In my html file below, I load a svg file through a img tag. I want to select a particular path element in the svg file and manipulate it like change the rotation of just the selected path element. This isn't working, does anyone know why?

Thanks

<!DOCTYPE html>
<html>
    <head>
        <title>Animate</title>

        <style>

        </style>

        <script src="../js/plugin/jquery-2.1.4.min.js"></script>


        <script>
            $(document).ready(function() {
                var right_arm = document.querySelector('steve.right_arm');//in JS
                var a = 1;
            });
        </script>
    </head>

    <body>
        <img id="steve" src="images/steve/steve.svg" height="300" alt="Steve"/>
    </body>

</html>

`` tags have no DOM, you can't manipulate them. You'll need to us an ` — Robert Longson, May 27 '15 at 22:23

score 1 · Answer 1 · answered May 27 '15 at 22:55

As said in comments, the img has no DOM. You cannot change a path from this tag.

You can paste all the svg content into the html instead of img tag.

Then you can use d3.js or snapsvg.io. Or simoly you can use jQuery, select the path with id or className and change its attributes or cas properties.

How to select path tag from svg file in img tag?

1 Answers1