画一个SVG路径最简单的方法 [英] Simplest way to draw an SVG path

问题描述

我尝试以下tutiroal从这里： http://jakearchibald.com/2013 /动画线拉-SVG /

  VAR路径= document.querySelector（svg1。）;
VAR长度= path.getTotalLength（）;
path.style.transition = path.style.WebkitTransition =无;
path.style.strokeDasharray =长度;
path.style.strokeDashoffset =长度;
path.getBoundingClientRect（）;
path.style.transition = path.style.WebkitTransition =中风dashoffset 1S渐出;
path.style.strokeDashoffset = 0;
 

HTML是如下：

 ＆LT; Path类=svg1
风格=填写：无;行程：＃3498分贝;笔画宽度：7;脑卒中的linecap：圆;脑卒中linejoin：冠冕行程miterLimit分别：4;
D =M247 103 A130 130 0 1 1 247 363 A130 130 0 1 1 247 103
/＆GT;
 

问题是，当我在Firefox中使用它，它的作品。但是，如果我去为Chrome，动画冻结在像75％，并立即跳转到100％，像30多岁。我注意到，该动画不仅在一种情况下冻结 - 如果我使用中风dashoffset 530ms渐出，即530ms以内

能不能有人提出了一个解决方案或建议以动画的SVG路径没有吨无用code的好办法？

解决方案

CSS-技巧最近写了一篇文章这个：

我们的想法是，我们设置了SVG形状用虚线冲程其中虚线的长度是整个路径的长度。然后，我们抵消与动画的路径长度每个冲刺。 （阅读文章）

FIDDLE

\r

\r

.svg1 {\r
  行程dasharray：822;\r
  行程dashoffset：822;\r
  动画：短跑5秒线性交替无限;\r
}\r
@keyframes破折号{\r
  从{\r
    行程dashoffset：822;\r
  }\r
  至 {\r
    行程dashoffset：0;\r
  }\r
}

\r

＆LT; SVG版本=1.1的xmlns =HTTP：// WWW。 w3.org/2000/svg的xmlns：的xlink =http://www.w3.org/1999/xlink×=0像素Y =0像素宽度=500px的高度=500px的视框= 0 0 500 500使背景=新0 0 500 500XML：空间=preserve＆GT;\r
  ＆LT; Path类=svg1的风格=填写：无;行程：＃3498分贝;笔画宽度：7;脑卒中的linecap：圆;脑卒中linejoin：冠冕行程miterLimit分别：4; D =103 M247 A130 130 0 1 1 247 363 130 A130 0 1 1 247 103/＆GT;\r
＆LT; / SVG＆GT;

\r

\r

\r

那么，如何获取路径的长度是多少？

这也涵盖了上述文章中：

只要运行code：

  VAR路径= document.querySelector（'svg1。'）;
VAR长度= path.getTotalLength（）;
 

I tried the following tutiroal from here: http://jakearchibald.com/2013/animated-line-drawing-svg/

var path = document.querySelector(".svg1");
var length = path.getTotalLength();
path.style.transition = path.style.WebkitTransition = "none";
path.style.strokeDasharray = length;
path.style.strokeDashoffset = length;
path.getBoundingClientRect();
path.style.transition = path.style.WebkitTransition = "stroke-dashoffset 1s ease-out";
path.style.strokeDashoffset = 0;

HTML is as following:

<path class="svg1" 
style="fill: none; stroke: #3498db; stroke-width: 7; stroke-linecap: round; stroke-linejoin:  miter; stroke-miterlimit: 4;"
d="M247 103 A130 130 0 1 1 247 363 A130 130 0 1 1 247 103"
/>

The thing is when I use it in Firefox, it works. But if I go for Chrome, the animation freezes at something like 75% and instantly jumps to 100% in like 30s. I've noticed, that the animation doesn't freeze only in one case - if I use stroke-dashoffset 530ms ease-out, i.e. 530ms or less.

Could someone suggest a solution for that or recommend a good way to animate an svg path without tons of useless code?

解决方案

CSS-Tricks recently wrote an article on this:

The idea is we set our SVG shape with a dashed stroke where the dash length is the length of the entire path. Then we offset each dash with that path length with an animation. (Read the article)

FIDDLE

.svg1 {
  stroke-dasharray: 822;
  stroke-dashoffset: 822;
  animation: dash 5s linear alternate infinite;
}
@keyframes dash {
  from {
    stroke-dashoffset: 822;
  }
  to {
    stroke-dashoffset: 0;
  }
}

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="500px" height="500px" viewBox="0 0 500 500" enable-background="new 0 0 500 500" xml:space="preserve">
  <path class="svg1" style="fill: none; stroke: #3498db; stroke-width: 7; stroke-linecap: round; stroke-linejoin:  miter; stroke-miterlimit: 4;" d="M247 103 A130 130 0 1 1 247 363 A130 130 0 1 1 247 103" />
</svg>

So how do you get the length of the path?

That's also covered in the above article:

Just run the code:

var path = document.querySelector('.svg1');
var length = path.getTotalLength();

这篇关于画一个SVG路径最简单的方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！