使用javascript设置stroke-dasharray和dashoffset的长度
[英]Set length of stroke-dasharray and dashoffset with javascript
问题描述
我有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>
2 个解决方案
解决方案1
2 2018-01-05 08:10:24
您可以使用命令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该行将被隐藏，
使用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”的值后，按Total
更新
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"/>
解决方案2
1 2018-01-05 16:30:08
评论中的问题和答案的新答案
我不知道你想到底想要什么样的动画。
但是如果你对绘制箭头，三角形的连续动画感到满意，那么我可以建议以下选项。
我转换了你的代码polygon - > 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>
我想使用jquery使用“stroke-dasharray”和“stroke-dashoffset”将html的每个svg文件制作成页面动画
[英]I want to make each svg files of html to page animated using “stroke-dasharray” and “stroke-dashoffset ” using jquery
带有stroke-dasharray的一系列cicles是不和谐的，无论是canvas还是svg
[英]Series of cicles with stroke-dasharray are unhramonious, either canvas or svg
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
更改路径长度时，使笔划-dasharray保持一致
svg 中风-dasharray 没有工作
我想使用jquery使用“stroke-dasharray”和“stroke-dashoffset”将html的每个svg文件制作成页面动画
笔划-dashoffset和dasharray动画不起作用
笔划破折号数组到没有库的可视数据
多个路径上的Stroke-dasharray补间
用 stroke-dasharray 和活动颜色填充划分半圆
带有stroke-dasharray的一系列cicles是不和谐的，无论是canvas还是svg
如何获取圆和矩形上的笔触-dasharray的确切数量？
使用 stroke-dasharray 在所需的 position 处显示行
相关标签