How to “connect” PHP “network” to an .svg image

Question

Basically, there's an img with src of an .svg image. What I'm trying to do is slowly(.2s ease) change the color of it from black to white.
Since it's not an inline <svg> , I can't simply change fill color in CSS.

I tried changing img src to this image's white-colored copy, but that way I won't have the transition.

I could use the crossfading technique, but I'd like to keep it simple and without position: absolute .

So, I came up with a solution. I change a PHP variable's color in hover() function of jQuery, and then echo that variable like so inside the .svg image itself: fill=<?php echo "'$color'" ?>

Here's the code:
JavaScript/jQuery(mainjs.php):

<?php
    $color = "";
?>

<script type="text/javascript">
$(function() {


    $("#svg_img").hover(
        function() {
            <?php $color = "#221e1f"; ?>
        },
        function() {
            <?php $color = "white"; ?>
        }
    );
});
</script>

And HTML(if necessary):

<img id="svg_img" src="images/um.svg" style="height: 7vh; vertical-align: middle;" alt="Home" />

So how would I go about doing that? If not possible — or you know a better way — then, how would I achieve my goal without the crossfading technique?

Answer 1

In the hover you have to update the fill property. You don't need that PHP code in hover.

Tip: What you're doing here is really not a good idea. Please find out what ajax and MVC is. You cannot write PHP in a JavaScript.