I'm encountering an issue where the SVG circle does not scale properly with a click event in Firefox, unlike Chrome. Is there a way to achieve consistent behavior between the two browsers without relying heavily on JavaScript?
HTML:
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
<circle cx="50%" cy="50%" r="15"/>
</svg>
CSS:
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
circle {
-webkit-transition: ease 0.7s all;
-moz-transition: ease 0.7s all;
-ms-transition: ease 0.7s all;
-o-transition: ease 0.7s all;
transition: ease 0.7s all;
}
JS:
$(document).ready(function() {
$("body").click(function() {
if($("circle").attr("r") == 15) {
$("circle").attr("r", function() {
if ($(window).height() > $(window).width()) {
return Math.sqrt(Math.pow($(window).width(), 2) + Math.pow($(window).height(), 2));
}
return (Math.sqrt(Math.pow($(window).width(), 2) + Math.pow($(window).height(), 2)));
});
} else {
$("circle").attr("r", 15);
}
});
});