0

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?

gen_Eric
  • 223,194
  • 41
  • 299
  • 337
The Light Sabrix
  • 127
  • 9
  • You need to understand the difference between _server-side_ code and _client-side_ code. You can't do that. – SLaks Aug 21 '15 at 20:57
  • 1
    How big is the svg? Put it inline instead of in an img tag, then you can manipulate it with JS directly – rjdown Aug 21 '15 at 21:06
  • Also check this out http://stackoverflow.com/questions/138309/is-it-possible-to-manipulate-an-svg-document-embedded-in-an-html-doc-with-javasc – rjdown Aug 21 '15 at 21:21

1 Answers1

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.

Martin Joó
  • 325
  • 1
  • 11
  • That would work if I this image were an inline ``, but since it's just an ``, that doesn't work. I tried. That said, you did give me right now an excellent idea. As for ajax and MVC, I may look at that later, but I have to complete something I'm working on rather soon, so I've got no time to learn new things right now. – The Light Sabrix Aug 21 '15 at 21:29
  • Then create two different svg for the two colors and in the hover change the src attribute from one to the other. if (src == 'x') { src == 'y' } ... Or place two img in the page and in the hover hide() and show() them. – Martin Joó Aug 21 '15 at 21:40
  • Did you even read what I said? Placing 2 images IS crossfading. And changing `src` doesn't work with CSS transition. Granted, I already used that troublesome crossfading technique, so no need to try hard. At least, I learned that what I asked for is impossible. – The Light Sabrix Aug 21 '15 at 21:54
  • Changing src gonna be work. I am not working with css so I cannot help here, but Im sure there's a way to do this... Maybe this helps http://stackoverflow.com/questions/11416136/image-substitution-and-transition-with-css3 – Martin Joó Aug 21 '15 at 22:01