我使用CSS进行以下动画：
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Generated by graphviz version 2.40.1 (20161225.0304) -->
<!-- Title: G Pages: 1 -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="247pt" height="543pt" viewBox="0.00 0.00 246.86 543.19">
<g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 539.1859)">
<style>
#a1123 {
stroke-dasharray: 100.5;
stroke-dashoffset: 100.5;
animation: dash2 2s linear infinite;}
@keyframes dash2 {to {stroke-dashoffset: 0;}}
#a1124 {
stroke-dasharray: 100.5;
stroke-dashoffset: 100.5;
animation: dash2 2s linear infinite;}
@keyframes dash2 {to {stroke-dashoffset: 0;}}
</style>
<g id="node4" class="node">
<title>c</title>
<ellipse fill="none" stroke="#000000" cx="211" cy="-315.8894" rx="27" ry="18" />
<text text-anchor="middle" x="211" y="-311.6894" font-family="font-awesome" font-size="14.00" fill="#000000">c</text>
</g>
<!-- 2->c -->
<g id="a1123" class="edge">
<title>2->c</title>
<path fill="none" stroke="#ff0000" stroke-width="3" d="M149.4218,-420.9789C160.4144,-409.9076 171.2176,-397.7063 180,-385.1859 188.9863,-372.3746 196.3054,-356.5405 201.5708,-343.2434" />
<polygon fill="#ff0000" stroke="#ff0000" stroke-width="3" points="204.9306,-344.2533 205.1904,-333.6617 198.3823,-341.7795 204.9306,-344.2533" />
</g>
<!-- c->e -->
<g id="a1124" class="edge">
<title>c->e</title>
<path fill="none" stroke="#ff0000" stroke-width="3" d="M208.109,-297.8625C205.1217,-279.2357 200.2512,-248.8658 195.5911,-219.8076" />
<polygon fill="#ff0000" stroke="#ff0000" stroke-width="3" points="198.9943,-218.9251 193.9549,-209.6055 192.0827,-220.0336 198.9943,-218.9251" />
</g>
</g>
</svg>
但问题是属性stroke-dasharray和stroke-dashoffset是静态设置的。但我想计算每个边的长度，并通过javascript设置stroke-dasharray和stroke-dashoffset计算的路径长度。我怎样才能做到这一点？我尝试了很多东西，但它没有用。
更新 有了@Alexandr_T给出的代码，我已经更新了我的代码，并且我能够计算路径的长度。我得到了价值，但是通过javascript设置值并不像我在CSS的代码的第一部分那样创建动画。必须有我正在做的事情。这里的代码通过javascript（我在问题中保留了两个代码，所以你可以看到我想要实现的第一个代码，但是通过javascript和第二个代码，这是通过javascript的当前状态）：
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Generated by graphviz version 2.40.1 (20161225.0304) -->
<!-- Title: G Pages: 1 -->
<script>
function TotalLength(){
var path = document.querySelector('#check');
var len = Math.round(path.getTotalLength() );
path.style.strokeDasharray = len;
path.style.strokeDashoffset = len;
alert("Path length - " + len);
};
</script>
<style>
#a1123 {
animation: dash2 2s linear infinite;}
@keyframes dash2 {to {stroke-dashoffset: 0;}}
#a1124 {
stroke-dasharray: 100.5;
stroke-dashoffset: 100.5;
animation: dash2 2s linear infinite;}
@keyframes dash2 {to {stroke-dashoffset: 0;}}
</style>
<body>
<input type="button" value="Total" onclick="TotalLength()"/>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="247pt" height="543pt" viewBox="0.00 0.00 246.86 543.19">
<g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 539.1859)">
<g id="node4" class="node">
<title>c</title>
<ellipse fill="none" stroke="#000000" cx="211" cy="-315.8894" rx="27" ry="18" />
<text text-anchor="middle" x="211" y="-311.6894" font-family="font-awesome" font-size="14.00" fill="#000000">c</text>
</g>
<!-- 2->c -->
<g id="a1123" class="edge">
<title>2->c</title>
<path fill="none" stroke="#ff0000" stroke-width="3" d="M149.4218,-420.9789C160.4144,-409.9076 171.2176,-397.7063 180,-385.1859 188.9863,-372.3746 196.3054,-356.5405 201.5708,-343.2434" />
<polygon fill="#ff0000" stroke="#ff0000" stroke-width="3" points="204.9306,-344.2533 205.1904,-333.6617 198.3823,-341.7795 204.9306,-344.2533" />
</g>
<!-- c->e -->
<g id="a1124" class="edge">
<title>c->e</title>
<path id="check" fill="none" stroke="#ff0000" stroke-width="3" d="M208.109,-297.8625C205.1217,-279.2357 200.2512,-248.8658 195.5911,-219.8076" />
<polygon fill="#ff0000" stroke="#ff0000" stroke-width="3" points="198.9943,-218.9251 193.9549,-209.6055 192.0827,-220.0336 198.9943,-218.9251" />
</g>
</g>
</svg>
</body>
答案 0 :(得分：2)
您可以使用命令JavaScript getTotalLength()
`<script>
function TotalLength(){
var path = document.querySelector('#check');
var len = Math.round(path.getTotalLength() );
alert("Path length - " + len);
};
</script>`
结果编号需要在stroke-dasharray和stroke-dashoffset
在stroke-dashoffset的最大值处，该线将被隐藏，
使用stroke-dashoffset = "0"，线条将完全绘制。
为了方便计算每个补丁的`stroke-dashoffset'，我使用了这种技术：
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<input type="button" value="Total" onclick="TotalLength()"/>
<div>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="500" height="500" viewBox="0 0 1000 1000" >
<path id="check" transform="scale(1 1) rotate(0) translate(4 539.1859)" fill= "none" stroke ="red" stroke-width ="1"
d="M208.109,-297.8625C205.1217,-279.2357 200.2512,-248.8658 195.5911,-219.8076" />
</svg>
</div>
<script>
function TotalLength(){
var path = document.querySelector('#check');
var len = Math.round(path.getTotalLength() );
alert("Path length - " + len);
};
</script>
您可以将此文件复制到本地计算机，并在每次需要计算修补程序的长度时使用它。
为此，您需要从应用程序中获取补丁的参数“d”，并将其插入而不是文件中的现有参数。
更改“d”的值后，按总计
更新
The getTotalLength ()方法仅支持patch
要计算应用中polygon的长度，请将polygon转换为patch
<polygon fill="#ff0000" stroke="#ff0000" stroke-width="3" points="204.9306,-344.2533 205.1904,-333.6617 198.3823,-341.7795 204.9306,-344.2533" />
<path d="M204.9306,-344.2533 205.1904,-333.6617 198.3823,-341.7795 204.9306,-344.2533"/>
答案 1 :(得分：1)
评论中的问题和答案的新答案
我不知道你想要最终得到什么样的动画。
但如果您对绘制箭头，三角形的连续动画感到满意，那么我可以建议以下选项。
我转换了您的代码polygon - ＆gt; path
我学会了使用所有补丁的getTotalLength ()长度方法：
#firstLine - 90.4px
#firstTriangle - 29px
#secondLine - 79px
#secondTriangle - 28px
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Generated by graphviz version 2.40.1 (20161225.0304) -->
<!-- Title: G Pages: 1 -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="247pt" height="543pt" viewBox="0.00 100 246.86 543.19">
<g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 539.1859)">
<style>
#firstLine {
stroke-dasharray: 90.4;
stroke-dashoffset: 90.4;
animation: dash1 2s linear forwards;}
@keyframes dash1 {to {stroke-dashoffset: 0;}}
#firstTriangle {
stroke-dasharray: 29;
stroke-dashoffset: 29;
animation: dash2 1s linear 2s forwards;}
@keyframes dash2 {to {stroke-dashoffset: 0;}}
#secondLine {
stroke-dasharray: 79;
stroke-dashoffset: 79;
animation: dash3 2s linear 3s forwards;}
@keyframes dash3 {to {stroke-dashoffset: 0;}}
#secondTriangle {
stroke-dasharray: 28;
stroke-dashoffset: 28;
animation: dash3 1s linear 5s forwards;}
@keyframes dash3 {to {stroke-dashoffset: 0;}}
</style>
<g id="node4" class="node">
<title>c</title>
<ellipse fill="none" stroke="#000000" cx="211" cy="-315.8894" rx="27" ry="18" />
<text text-anchor="middle" x="211" y="-311.6894" font-family="serif" font-size="18" fill="#000000">c</text>
</g>
<!-- 2->c -->
<g id="a1123" class="edge">
<title>2->c</title>
<path id="firstLine" fill="none" stroke="#ff0000" stroke-width="3" d="M149.4218,-420.9789C160.4144,-409.9076 171.2176,-397.7063 180,-385.1859 188.9863,-372.3746 196.3054,-356.5405 201.5708,-343.2434" />
<path id="firstTriangle" fill="none" transform="translate(-2 -3)" stroke="#ff0000" stroke-width="3" d="M204.9306,-344.2533 205.1904,-333.6617 198.3823,-341.7795 205.9306,-343.2533" />
</g>
<!-- c->e -->
<g id="a1124" class="edge">
<title>c->e</title>
<path id="secondLine" fill="none" stroke="#ff0000" stroke-width="3" d="M208.109,-297.8625C205.1217,-279.2357 200.2512,-248.8658 195.5911,-219.8076" />
<path id="secondTriangle" fill="none" stroke="#ff0000" stroke-width="3" d="M198.9943,-218.9251 193.9549,-209.6055 192.0827,-220.0336 198.9943,-218.9251" />
</g>
</g>
</svg>