<a> link breaks SVG path transition in Safari
I have a normal SVG triangle:
<svg width="200px" height="200px" viewBox="0 0 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg">
<polygon id="triangle" fill="#000000" points="100 0 200 200 0 200 "></polygon>
</svg>
I am using CSS to smoothly transition the color of the SVG when someone hovers over it:
#triangle { transition: 1s; }
svg:hover #triangle { fill: orange; }
This works in all browsers.
But now I want to add click link functionality to the same SVG, so I surround it with link tags:
<a href="http://google.com">
<svg width="200px" height="200px" viewBox="0 0 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg">
<polygon id="triangle" fill="#000000" points="100 0 200 200 0 200 "></polygon>
</svg>
</a>
BUT NOW in Safari, my smooth color transition is interrupted. Instead of my original second color transition, my SVG path now changes color instantly.
This does not happen in Firefox or Chrome.
Is this a glitch in Safari?
Here is my problem in Codepen http://codepen.io/TimArt/pen/lgLEp
source to share
I am creating a "fake-link" object in JS to use when it does. Then I can bind the '.fake-link' to any HTML element to replicate the standard tag <a>
.
JS:
/**
* Link namespace
*/
Link = function() {
};
/**
* Fake a link
*/
Link.prototype.openLink = function(el) {
var link = $(el).attr('data-href');
var win = null;
win = window.open(link, '_self');
win.focus();
};
window.Link = new Link();
$(function(){
$(document).on('click', '.fake-link', function(e) {
e.stopPropagation();
window.Link.openLink($(this));
return false;
});
});
Some HTML:
<span class="fake-link" data-href="/about">
<svg>
INLINE SVG CONTENT HERE
</svg>
</span>
source to share
If you are using <a xmlns:xlink="" data-href="URL"
, the transitions will work in safari / webkit browsers. However, you will still need javascript to get the link to work. So for jQuery also use this code:
$('#Element').click(function(e) {
location.href = $(this).attr('data-href');
e.preventDefault();
})
source to share