SVG“圆”元素半径属性“r”在 Firefox 中不会转换，但在 Chrome 中效果很好

Question

我试图在单击事件上使 SVG 圆圈变大，它在 Chrome 52 中工作得很好（没有在旧版本上尝试过），但在 Firefox 中，CSS 转换没有效果。有没有办法让 Firefox 在没有太多 JavaScript 的情况下表现得与 Chrome 相同？

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

https://jsfiddle.net/xgscn4f1/

Answer 1

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

SVG 1.1 属性索引

请注意，r不在此列表中。

在即将到来的 SVG2 标准中，大多数属性都将是可样式化的。但是浏览器才刚刚开始实现 SVG2 功能。现在您可以r在 Chrome 中进行修改和转换，但在其他浏览器中还不能。

您将需要使用另一种技术来制作动画r。要么使用 SVG SMIL 动画，要么使用具有动画功能的各种 SVG JS 库之一。