1

我想将 svg 路径动画转换为纯 javascript 动画。

SVG 代码：

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="340px" height="333px" viewBox="0 0 340 333" enable-background="new 0 0 340 333" xml:space="preserve">
    <path class="path" fill="#FFFFFF" stroke="#000000" stroke-width="4" stroke-miterlimit="10" d="M66.039,133.545c0,0-21-57,18-67s49-4,65,8
s30,41,53,27s66,4,58,32s-5,44,18,57s22,46,0,45s-54-40-68-16s-40,88-83,48s11-61-11-80s-79-7-70-41
C46.039,146.545,53.039,128.545,66.039,133.545z"/>
</svg>

CSS 代码：

.path {
    stroke-dasharray: 10 10;    /* 10px fill, 10px gap */
    -webkit-animation: dash 10s linear normal infinite;
}

@-webkit-keyframes dash {
  from {
      stroke-dashoffset: 1000;
  }
  to {
      stroke-dashoffset: 0;
  }
}

这是小提琴

4

3 回答 3

0

我强烈建议您尝试一下 Raphael.js 库。

使用它，您可以轻松重现您想要的内容。

此外，还有一个非常有用的工具可以将您的 SVG 文件转换为 Raphael.js 可重用代码：http ://www.readysetraphael.com/

所以你的 SVG 文件会变成：

var rsr = Raphael('rsr', '340', '333');

var path_a = rsr.path("M66.039,133.545c0,0-21-57,18-67s49-4,65,8s30,41,53,27s66,4,58,32s-5,44,18,57s22,46,0,45s-54-40-68-16s-40,88-83,48s11-61-11-80s-79-7-70-41C46.039,146.545,53.039,128.545,66.039,133.545z");

path_a.attr({
  class: 'path',
  fill: '#FFFFFF',
  stroke: '#000000',
  "stroke-width": '4',
  "stroke-miterlimit": '10',
  'stroke-opacity': '1' 
}).data('id', 'path_a');

var rsrGroups = [];

然后，您只需将 a 添加<div id="rsr"></div>到您的文档，并将 CSS 选择器替换.path为path.

等等瞧！

检查这个小提琴以查看它的实际效果：http: //jsfiddle.net/47nkqgmn/

于 2014-10-31T22:59:54.743 回答
0

您可以查看一些 javascript SVG 库。我偏爱 Raphael (www.raphaeljs.com)。

它会是这样的：

var paper = Raphael('canvas', 600, 600);
paper.path("M66.039,133.545c0,0-21-57,18-67s49-4,65,8s30,41,53,27s66,4,58,32s-    5,44,18,57s22,46,0,45s-54-40-68-16s-40,88-83,48s11-61-11-80s-79-7-70-41C46.039,146.545,53.039,128.545,66.039,133.545z")
.attr({fill:"#FFFFFF", stroke: "#000000", "stroke-width": "4", "stroke-miterlimit": "10"})

小提琴：http: //jsfiddle.net/xLekbar4/

（注意：我在 html 中添加了一个 div 作为 raphael“画布”的容器，并将 css 更改为应用于“路径”元素，而不是“.path”类的元素）

于 2014-10-31T23:02:18.837 回答
0

我不确定你为什么需要纯 javascript，而且这个答案可能不适合你的需要，因为它确实创建了内联 CSS。但在这里，主要取自：https ://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dashoffset 

function dashOffset() {
    var path = document.querySelector('.path');
    var length = "1000";
    // Clear any previous transition 
    path.style.transition = path.style.WebkitTransition = 'none';
    // Set up the starting positions 
    path.style.strokeDasharray = "10 10";
    path.style.strokeDashoffset = "1000";
    // Trigger a layout so styles are calculated & the browser 
    // picks up the starting position before animating 
    path.getBoundingClientRect();
    // Define our transition 
    path.style.transition = path.style.WebkitTransition = 'stroke-dashoffset 10s linear';
    //listener to restart our loop
    path.addEventListener('transitionend', dashOffset, false);
    // Go! 
    path.style.strokeDashoffset = '0';
}
dashOffset();
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="340px" height="333px" viewBox="0 0 340 333" enable-background="new 0 0 340 333" xml:space="preserve">
    <path class="path" fill="#FFFFFF" stroke="#000000" stroke-width="4" stroke-miterlimit="10" d="M66.039,133.545c0,0-21-57,18-67s49-4,65,8
	s30,41,53,27s66,4,58,32s-5,44,18,57s22,46,0,45s-54-40-68-16s-40,88-83,48s11-61-11-80s-79-7-70-41
	C46.039,146.545,53.039,128.545,66.039,133.545z" />
</svg>

还有requestAnimationFrame办法： 

function anim(){
    var path = document.querySelector('.path');
    path.style.strokeDasharray = "10 10";
    path.style.strokeDashoffset--;
    requestAnimationFrame(anim);
    }
requestAnimationFrame(anim);


function anim(){
        var path = document.querySelector('.path');
        path.style.strokeDasharray = "10 10";
        path.style.strokeDashoffset--;
        requestAnimationFrame(anim);
        }
 requestAnimationFrame(anim);
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="340px" height="333px" viewBox="0 0 340 333" enable-background="new 0 0 340 333" xml:space="preserve">
    <path class="path" fill="#FFFFFF" stroke="#000000" stroke-width="4" stroke-miterlimit="10" d="M66.039,133.545c0,0-21-57,18-67s49-4,65,8
	s30,41,53,27s66,4,58,32s-5,44,18,57s22,46,0,45s-54-40-68-16s-40,88-83,48s11-61-11-80s-79-7-70-41
	C46.039,146.545,53.039,128.545,66.039,133.545z" />
</svg>

请注意，您可以使用纯 SVG animateMotion元素来重现它。

于 2014-11-01T04:26:36.897 回答