Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
HTML5 SVG css3 transition on fill not working when there is external link
CSS3 transitions on SVG fill properties don't work when links are in a visited state due to browser security restrictions. Browsers limit styling capabilities for visited links to prevent privacy attacks.
The Problem
When an SVG element is inside a visited link, CSS transitions on the fill property are disabled by the browser. This is a security feature to prevent websites from detecting your browsing history.
Solution: Adding Random Query Parameters
The most effective solution is to add a random query parameter to your URLs, making each link appear "unvisited" to the browser.
<a href="http://demo.com/?random=<?php echo rand(0, 99999) ?>">Your Link</a>
JavaScript Solution: Clean URLs on Click
You can remove the random parameter when the user clicks the link, ensuring clean URLs while maintaining the transition effect:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<a href="http://demo.com/?random=12345">Click Me</a>
<script>
$('body').on('click', 'a', function(event) {
event.preventDefault();
var originalUrl = $(this).prop('href');
var cleanUrl = originalUrl.split("?")[0];
window.location.href = cleanUrl;
});
</script>
</body>
</html>
Alternative: CSS-Only Approach
For simple cases, you can style the :link state specifically to ensure transitions work:
a:link svg {
fill: #blue;
transition: fill 0.3s ease;
}
a:hover svg {
fill: #red;
}
Key Points
- Browser security prevents CSS transitions on visited link states
- Random query parameters make links appear unvisited
- JavaScript can clean URLs while preserving the visual effect
- Always test your solution across different browsers
Conclusion
Adding random query parameters effectively bypasses visited link restrictions for SVG transitions. Use JavaScript cleanup to maintain clean URLs while preserving the desired visual effects.
170 Views
