Svg CSS3 Transition on Fill Not Working When There Is External Link

SVG css3 transition on fill not working when there is external link

This is actually something to do with the visited state. The reason the other commenters are saying it works is because they haven't been to your pages before. Once they have it will no longer work. I've tried adding visited states in the CSS and it makes no difference.

The easiest solution I've found is to just add a random query string to the url so the page is effectively not visited eg:

<a href="http:/mysite.com/?foo=<?php echo rand(0, 99999) ?>">My Link</a>

Most sites will ignore a query they don't recognise so that should be ok. Or better would be to remove it with JS on click.

$('body').on('click', 'a', function(e) {
    e.preventDefault();
    var url = $(this).prop('href');
    window.location.href = url.split("?")[0];
});

SVG + css3 animation not working with link markup

This can be done using pure CSS3 and HTML5. The trick is to embed the link inside the svg by using the xlink element with the target set to parent:

<svg xmlns:xlink="http://www.w3.org/1999/xlink">
    <a xlink:href="../index.html" target="_parent">
        <rect id="one" width="63.9" height="63.9" class="style3"/>
        <ellipse cx="127.8" cy="34.5" rx="48.8" ry="12.8" class="style4"/>
    </a>
</svg>

The two important bits:

The xmlns:xlink="http://www.w3.org/1999/xlink" namespace.
The actual link: <a xlink:href="../index.html" target="_parent"> </a>

Note: This method has only been tested using the <object> method of embedding the SVG.

:hover not working on svg when svg is in external file

Can't be done with the <img> tag. See: Styling And Animating SVGs With CSS. Near the bottom of the page of this article there's a table with the pros and cons of each SVG embedding technique (ie, img, object, etc.). I have reproduced the table here:

|                      | CSS Interactions | CSS Animations | SVG Animations |
|:--------------------:|:----------------:|:--------------:|:--------------:|
|         <img>        |        No        |      Yes*      |       Yes      |
| CSS background image |        No        |      Yes*      |       Yes      |
|       <object>       |       Yes*       |      Yes*      |       Yes      |
|       <iframe>       |       Yes*       |      Yes*      |       Yes      |
|        <embed>       |       Yes*       |      Yes*      |       Yes      |
|    <svg> (inline)    |        Yes       |       Yes      |       Yes      |

*Only if inside <svg>

What's preventing my CSS3 SVG animation?

The problem, as it turns out, has something to do with the visited state of the linked SVG. This is reproducible with the both the codepend and code snippet I provided in my initial post. If you click the SVG link it will take that iFrame to the stackoverflow index or the codepen index. If you then hit the browser back button the animation will stop. This is a bug in both Safari and Google Chrome. Firefox seems to work through this bug.

fill property not working for SVGs

You can't customize a SVG with CSS by importing it through an img tag, you'll have to embed the SVG code in your HTML in order to achieve this.

The accepted answer for this question has an interesting approach, by replacing every img tag by inline SVG to allow CSS styling.

Use CSS hover with external SVG files?

To get this working you need to insert the SVG in HTML code itself.

Adding an external SVG using src will only allow adding CSS to the overall SVG element and not the interior subtags.

also, can you show some more code? So that it will be better to understand the problem well.

eg:

<!DOCTYPE html>
<html>
<head>
  <title>SVG</title>
  <style media="screen">
    circle:hover{
      fill: blue;
    }
  </style>
</head>
<body>

<svg width="100" height="100">
  <circle  cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

</body>
</html>

How to set a External SVG color in HTML using CSS?

The problem is that you don't target the actual SVG element, you target the "SVG container". To be able to change the color of one of the elements inside the SVG you have to target that specific element.

E.g change the fill color of all paths in a SVG:

.weather_icon path {
    fill: yellow;
}

If you want to make it easier to handle add class names to the different elements inside the svg.

<path class="my-class" ......... />

This will make it possible to target a specific element by its class:

.weather_icon .my-class {
    fill:blue;
    stroke:green;
}

Svg CSS3 Transition on Fill Not Working When There Is External Link