有谁知道如何在 SVG 中定义动画弧/圆，使弧从 0 度开始，以 360 度结束？
问问题
17975 次
7 回答
8
一种方法是使用圆形，并为stroke-dashoffset设置动画（您也需要 'stroke-dasharray'）。可以在此处看到此类动画的示例（不是圆圈，但适用相同的原理） 。
于 2010-07-16T06:55:07.170 回答
8
您可以使用路径的 lineto “手动”绘制它并计算弧的位置：
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"
viewBox="0 0 1200 800"
preserveAspectRatio="xMidYMid"
style="width:100%; height:100%; position:absolute; top:0; left:0;"
onload="drawCircle();">
<script>
function drawCircle() {
var i = 0;
var circle = document.getElementById("arc");
var angle = 0;
var radius = 100;
window.timer = window.setInterval(
function() {
angle -=5;
angle %= 360;
var radians= (angle/180) * Math.PI;
var x = 200 + Math.cos(radians) * radius;
var y = 200 + Math.sin(radians) * radius;
var e = circle.getAttribute("d");
if(i==0) {
var d = e+ " M "+x + " " + y;
}
else {
var d = e+ " L "+x + " " + y;
}
if (angle === -5 && i !== 0) {
window.clearInterval(window.timer);
}
circle.setAttribute("d", d);
i++;
}
,10)
}
</script>
<path d="M200,200 " id="arc" fill="none" stroke="blue" stroke-width="2" />
</svg>
于 2010-07-16T07:23:09.957 回答
5
您还可以使用 acircle和以下技术手动绘制 SVG：
- 给
circle一个stroke。 - 使
strokedashed虚线长度等于圆的周长。 - 偏移
stroke等于圆的周长的长度。 - 为笔画设置动画。
HTML：
<svg width="200" height="200">
<circle class="path" cx="100" cy="100" r="96" stroke="blue" stroke-width="4" fill="none" />
</svg>
CSS：
circle {
stroke-dasharray: /* circumference */;
stroke-dashoffset: /* circumference */;
animation: dash 5s linear forwards;
}
@keyframes dash {
to {
stroke-dashoffset: /* length at which to stop the animation */;
}
}
于 2017-01-05T15:05:47.327 回答
3
或者，也许您可以发现一个预先绘制的圆圈以提供所需的效果：
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000" width="400" height="400">
<rect x="0" y="0" width="1000" height="1000"/>
<circle cx="500" cy="500" r="500" fill="red"/>
<rect x="0" y="500" width="1000" height="500"/>
<rect x="0" y= "0" width="1000" height="500">
<animateTransform attributeName="transform" type="rotate" begin="0s" dur="5s" fill="freeze" from="0,500,500" to="180,500,500"/>
</rect>
</svg>
于 2013-09-08T18:44:04.697 回答
2
我也有点失望，不能简单地用百分比或角度制作圆弧。
如今，当我需要一个不属于较长路径的弧时，我使用圆和 strokeDasharray 技巧来显示这个圆的一部分。
svg {
outline: solid;
height: 100px;
width: 100px;
}
.arc {
fill: transparent;
stroke-width: 5;
stroke: red;
stroke-dasharray: 94.24778 219.91149;
}<svg viewport="0 0 100 100">
<circle cx="50" cy="50" r="50" class="arc"></circle>
</svg>你可以在这里看到一个使用 Sass 进行计算的改进版本。
于 2015-11-25T19:22:21.060 回答
2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="">
</head>
<body>
</body>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"
viewBox="0 0 1200 800"
preserveAspectRatio="xMidYMid"
style="width:100%; height:100%; position:absolute; top:0; left:0;"
onload="drawCircle();">
<script>
function drawCircle() {
// center point
var cX = 300,
cY = 300;
radius = 300,
p1 = {x: cX+radius, y: cY},
p2 = {x: cX-radius, y: cY},
circle = document.getElementById("arc"),
angle = 0;
window.timer = window.setInterval(
function() {
angle -= 5;
angle %= 360;
var radians= (angle/180) * Math.PI;
var x = cX + Math.cos(radians) * radius;
var y = cY + Math.sin(radians) * radius;
if (Math.abs(angle) < 180 && angle != 0)
d= 'M ' + p1.x + ',' + p1.y + ' A' + radius+ ',' + radius+ (Math.abs(angle)==180?' 0 1 0 ':' 0 0 0 ')+x+' '+y;
else
d= 'M ' + p1.x + ',' + p1.y + ' A' + radius+ ',' + radius+ ' 0 1 0 '+p2.x+' '+p2.y +
' M ' + p2.x + ',' + p2.y + ' A' + radius+ ',' + radius+ (Math.abs(angle)==0?' 0 1 0 ':' 0 0 0 ')+x+' '+y;
circle.setAttribute("d", d);
if (Math.abs(angle) == 0)
window.clearInterval(window.timer);
}
,10)
}
</script>
<path d="" id="arc" fill="none" stroke="blue" stroke-width="2" />
</svg>
</html>于 2016-03-19T19:59:44.073 回答
-1
感谢您的回答 - 这里有一些关于我为什么要在 SVG 中为圆制作动画的更多信息：
我们有一个服务器-客户端应用程序。我计划在服务器上生成 SVG 图像来表示图表（饼图/条形图）并将 SVG 发送给客户端。我们有 Java 和 .NET 客户端。我将编写客户端代码来解析和渲染从服务器接收到的 SVG 图像。我计划只使用 SVG 格式的一个子集——不超过我们表示图表所需的内容，但动画是必需的。
从长远来看，拥有一个 ajax 客户端会很好——它将在没有 java 或 .NET 运行时的浏览器上运行。这就是我选择 SVG 格式的原因。
对于短期解决方案，我现在认为我将向 SVG 添加自己的元素，使用起始角和扫描角定义弧。然后我可以通过对扫描角度进行动画来轻松定义我需要的动画，并使我的实现变得简单。
从长远来看——如果我们真的开始使用 AJAX/HTML 客户端——我将不得不重新实现并坚持 SVG 标准。
于 2010-07-16T11:21:48.047 回答