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 property index

请注意r不在此列表中。

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

您需要使用其他技术为r制作动画。使用SVG SMIL动画，或使用具有动画功能的各种SVG JS库之一。

Answer 2

您可以使用纯JS轻松制作SVG元素的任何属性，包括圆的半径，只需为元素提供ID：

＆＃13;

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

＆＃13;

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

＆＃13;

也可以动画笔画长度，通过＆＃34; stroke-dasharray＆＃34;属性，第一个参数，第二个用于空格。

SVG“circle”元素半径属性“r”在Firefox中没有转换，但在Chrome中运行得很好

2 个答案: