Javascript SVG"；圈；元素半径属性"；r"；在Firefox中不转换，但在Chrome中可以很好地转换

我正在尝试在点击事件中使SVG圆圈变大，它在Chrome52中运行良好（在旧版本中没有尝试过），但在Firefox中CSS转换没有效果。有没有一种方法可以让Firefox在不使用太多JavaScript的情况下与Chrome表现相同

HTML:

JS:

---

在SVG1.1（当前的标准）中，只有某些属性可以使用CSS进行样式化。可在此处找到这些属性的列表：

请注意，

r

不在此列表中

在即将推出的SVG2标准中，大多数属性都是可设置样式的。但浏览器才刚刚开始实现SVG2功能。现在你可以在Chrome中修改和转换

r

，但在其他浏览器中还不能

---

您需要使用另一种技术来设置

r

的动画。可以使用SVG SMIL动画，也可以使用具有动画功能的各种SVG JS库。

在SVG 1.1（当前标准）中，只有某些属性可以使用CSS设置样式。可在此处找到这些属性的列表：

请注意，

r

不在此列表中

在即将推出的SVG2标准中，大多数属性都是可设置样式的。但浏览器才刚刚开始实现SVG2功能。现在你可以在Chrome中修改和转换

r

，但在其他浏览器中还不能

---

您需要使用另一种技术来设置

r

的动画。可以使用SVG SMIL动画，也可以使用具有动画功能的各种SVG JS库。

您可以使用纯JS轻松地为SVG元素的任何属性设置动画，包括圆半径，只需为元素指定ID即可：

var c1=document.getElementById（“c1”）；
var strokeLength=300；
c1.setAttribute（“笔划数组”，“笔划长度”+（笔划长度）+“700”）；
功能变换器（el）{
var n1=0；
var-ch1=1；
var elT=设定间隔（elTF，5）；
函数elTF（）{
el.setAttribute（“r”，n1）；
如果（n1==0）{
ch1=1；
}否则如果（n1==100）{
ch1=-1；
}
n1+=ch1；
}
}
变换器（c1）
您可以使用纯JS轻松地为SVG元素的任何属性设置动画，包括圆半径，只需为元素指定ID即可：


var c1=document.getElementById（“c1”）；
var strokeLength=300；
c1.setAttribute（“笔划数组”，“笔划长度”+（笔划长度）+“700”）；
功能变换器（el）{
var n1=0；
var-ch1=1；
var elT=设定间隔（elTF，5）；
函数elTF（）{
el.setAttribute（“r”，n1）；
如果（n1==0）{
ch1=1；
}否则如果（n1==100）{
ch1=-1；
}
n1+=ch1；
}
}
变换器（c1）

如果不想使用javascript，可以在Firefox中用SMIL编写。如果不想使用javascript，可以在Firefox中用SMIL编写。有SVG JS库的建议吗？我没有任何建议。有很多可供选择，但我没有使用任何一个。有SVG JS库推荐吗？我没有任何推荐。有一个数字可供选择，但我没有使用任何一个。
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <circle cx="50%" cy="50%" r="15"/>
</svg>

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;
    }

$(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);
        }
    });
});