I'm trying to make an SVG circle bigger on a click event and it works just fine in Chrome 52 (haven't tried it on older versions) but in Firefox the CSS transition has no effect. Is there a way to make Firefox behave the same way as Chrome without too much JavaScript?

HTML:

<svg width="100%" height="100%" version="1.1" xmlns="">
    <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);
        }
    });
});

/

I'm trying to make an SVG circle bigger on a click event and it works just fine in Chrome 52 (haven't tried it on older versions) but in Firefox the CSS transition has no effect. Is there a way to make Firefox behave the same way as Chrome without too much JavaScript?

HTML:

<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3/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);
        }
    });
});

https://jsfiddle/xgscn4f1/

• javascript
• html
• css
• svg

• You'd write this in SMIL in Firefox if you don't want to use javascript. – Robert Longson Commented Sep 28, 2016 at 10:51

2 Answers 2

In SVG 1.1, which is the current standard, only certain attributes can by styled with CSS. The list of those properties can be found here:

SVG 1.1 property index

Note that r is not in this list.

In the uping SVG2 standard, most attributes will be stylable. But browsers have only just started to implement SVG2 features. Right now you can modify and transition r in Chrome, but not yet in other browsers.

You will need to use another technique to animate r. Either using SVG SMIL animation, or use one of the various SVG JS libraries that have animation functions.

You can animate any attributes of SVG elements easy with pure JS, including radius of circle, just give ID to element:

var c1 = document.getElementById("c1");
var strokeLength = 300;
c1.setAttribute("stroke-dasharray", "" + (strokeLength) + " 700");

function changeR(el) {
	var n1 = 0;
	var ch1 = 1;
	var elT = setInterval(elTF, 5);
	function elTF() {
		el.setAttribute("r", n1);
		if (n1 == 0) {
			ch1 = 1;
		} else if (n1 == 100) {
			ch1 = -1;
		}
		n1 += ch1;
	}
}
changeR(c1);

<svg width="250" height="200">		
  <circle id="c1" cx="100" cy="100" r="50" fill="transparent" stroke="blue" stroke-width="10" stroke-linecap="butt" stroke-dasharray="300 500" />
</svg>

Can animate stroke length too, via "stroke-dasharray" attribute, first parameter, second is for empty space.