javascript - SVG "circle"元素半径属性 "r"在 Firefox 中不转换但在 Chrome 中很好

Question

我试图在点击事件中使 SVG 圆圈变大，它在 Chrome 52 中工作得很好(还没有在旧版本上尝试过)，但在 Firefox 中，CSS 过渡无效。有没有办法让 Firefox 的行为方式与 Chrome 相同，而无需太多 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);
        }
    });
});

https://jsfiddle.net/xgscn4f1/

Answer 1

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

SVG 1.1 property index

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

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

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