我是Snap SVG的新手，我试图制作一个划痕并指出划痕路径的指针。这些是我试图解决的几个问题：
以下是代码：
HTML
<svg id="svgout" width="550px" height="550px"></svg>
JS
var s = Snap("#svgout");
var scratchPathSVG = '<path class="cls-1" d="M224.58,215.86c-11.57,11.56-23.13,22.08-33.81,33.64C181,259,159.64,286.3,147.19,287.35c-26.69,1.05,0-32.59,7.12-41L189,202.19c21.35-27.33,43.59-53.62,64.94-79.9,9.79-12.62,23.13-24.18,26.69-41,0-2.1,0-4.21-.89-5.26C268.18,63.42,245.93,88.65,237,96c-49.82,44.15-97,94.62-144.12,144-6.23,6.31-28.47,22.08-31.14,31.54C64.45,260,85.8,239,92,231.63l64.05-82c10.68-13.67,69.39-65.18,61.38-88.31-.89-3.15-4.45-7.36-8-5.26-22.24,10.51-40,34.69-57.83,52.56-15.12,15.77-31.14,30.49-46.26,46.26C93.81,166.45,60,211.65,45.77,211.65c11.57,0,56.94-71.49,70.28-87.26C139.18,96,172.1,67.63,189,34c8.9-17.87,10.68-36.79-11.57-33.64C157,2.45,133,36.09,116.94,50.81c-33.81,31.54-66.72,63.08-98.75,95.67C7.51,157,22.64,174.86,33.31,164.35c36.48-36.79,73-73.59,111.2-108.28,10.68-10.51,23.13-18.92,33.81-30.49-.89-2.1-2.67-3.15-3.56-5.26-5.34,7.36-9.79,13.67-15.12,21-16,21-33.81,41-49.82,61C100,114.94,2.17,213.76,35.09,233.73c13.34,7.36,33.81-17.87,41.81-26.28,19.57-18.92,39.14-39.95,57.83-59.92,17.79-18.92,45.37-36.79,58.72-59.92,9.79-16.82,1.78-7.36-5.34,0-10.68,11.56-19.57,24.18-29.36,36.79-16,20-31.14,39.95-46.26,59.92C91.14,212.71,52.88,247.4,44,285.24c-.89,2.1,0,5.26,1.78,7.36.89,1.05,1.78,1.05,1.78,2.1,2.67,2.1,4.45,2.1,7.12,1.05,24.91-12.62,45.37-43.1,64.94-64.13,28.47-29.44,57.83-58.87,87.18-88.31,8.9-8.41,58.72-48.36,57.83-53.62.89,13.67-21.35,32.59-28.47,42.05-28.47,36.79-56.94,74.64-84.52,112.49-5.34,7.36-38.25,44.15-22.24,54.67,19.57,11.56,85.4-72.54,95.19-83.05.89,0,.89-1.05,0,0Z" />';
var pathToScratch = s.path("M224.58,215.86c-11.57,11.56-23.13,22.08-33.81,33.64C181,259,159.64,286.3,147.19,287.35c-26.69,1.05,0-32.59,7.12-41L189,202.19c21.35-27.33,43.59-53.62,64.94-79.9,9.79-12.62,23.13-24.18,26.69-41,0-2.1,0-4.21-.89-5.26C268.18,63.42,245.93,88.65,237,96c-49.82,44.15-97,94.62-144.12,144-6.23,6.31-28.47,22.08-31.14,31.54C64.45,260,85.8,239,92,231.63l64.05-82c10.68-13.67,69.39-65.18,61.38-88.31-.89-3.15-4.45-7.36-8-5.26-22.24,10.51-40,34.69-57.83,52.56-15.12,15.77-31.14,30.49-46.26,46.26C93.81,166.45,60,211.65,45.77,211.65c11.57,0,56.94-71.49,70.28-87.26C139.18,96,172.1,67.63,189,34c8.9-17.87,10.68-36.79-11.57-33.64C157,2.45,133,36.09,116.94,50.81c-33.81,31.54-66.72,63.08-98.75,95.67C7.51,157,22.64,174.86,33.31,164.35c36.48-36.79,73-73.59,111.2-108.28,10.68-10.51,23.13-18.92,33.81-30.49-.89-2.1-2.67-3.15-3.56-5.26-5.34,7.36-9.79,13.67-15.12,21-16,21-33.81,41-49.82,61C100,114.94,2.17,213.76,35.09,233.73c13.34,7.36,33.81-17.87,41.81-26.28,19.57-18.92,39.14-39.95,57.83-59.92,17.79-18.92,45.37-36.79,58.72-59.92,9.79-16.82,1.78-7.36-5.34,0-10.68,11.56-19.57,24.18-29.36,36.79-16,20-31.14,39.95-46.26,59.92C91.14,212.71,52.88,247.4,44,285.24c-.89,2.1,0,5.26,1.78,7.36.89,1.05,1.78,1.05,1.78,2.1,2.67,2.1,4.45,2.1,7.12,1.05,24.91-12.62,45.37-43.1,64.94-64.13,28.47-29.44,57.83-58.87,87.18-88.31,8.9-8.41,58.72-48.36,57.83-53.62.89,13.67-21.35,32.59-28.47,42.05-28.47,36.79-56.94,74.64-84.52,112.49-5.34,7.36-38.25,44.15-22.24,54.67,19.57,11.56,85.4-72.54,95.19-83.05.89,0,.89-1.05,0,0Z").attr({ fill: "none", opacity: "0" });
var pointer = s.path("M26.4,182.43c.63.63,1.46.49,1.52-.31.1-1.56-10.56-23.52-11-25.81s0-4.6,2.15-5.7c2.92-1.53,4.54.06,5.82,2.26s6.34,12.55,8.43,17.22c3.09,6.89,10.38,26.09,12.14,26.09,2.75,0,1.41-4.18,1.41-4.18s-2.45-4.1-2.29-5.54a2.75,2.75,0,0,1,3-2.71c2,.35,5.39,2.8,7,5.48,2.63,4.47,9.56,23-7.72,36.29C29.26,239,18.67,227,14.25,221.79A75.28,75.28,0,0,1,3.42,205.33C.25,199-.13,198.64.11,195.81c.26-3.11,4.25-6,9.69.65.59.73,2.18-.18,1.19-1.58-1.53-2.15-5.34-7.65-1.7-10,4.47-2.93,6.42,2.74,8.63,4.16.51.33,1.53-.36,1.42-.86-.53-2.34-4.41-5.15-2.93-8.59a4.18,4.18,0,0,1,6.2-2C24,178.8,25.09,181.13,26.4,182.43Z").attr({ fill: "#666"});
pointer.drawAtPath( pathToScratch, 10000, );
function Drawing( svgString, transformString, timeBetweenDraws ) {
this.fragment = Snap.parse( svgString );
this.pathArray = this.fragment.selectAll('path');
this.group = s.g();
this.timeBetweenDraws = timeBetweenDraws;
};
Drawing.prototype.init = function( svgString, transformString ) {
this.group.clear();
this.currentPathIndex = 0;
};
Drawing.prototype.endReached = function() {
if( this.currentPathIndex >= this.pathArray.length ) {
return true;
};
};
Drawing.prototype.callOnFinished = function() {
}
Drawing.prototype.initDraw = function() {
this.init();
this.draw();
};
Drawing.prototype.quickDraw = function() {
this.init();
this.timeBetweenDraws = 0;
this.draw();
};
Drawing.prototype.draw = function() { // this is the main animation bit
if( this.endReached() ) {
if( this.callOnFinished ) {
this.callOnFinished();
return
};
};
var myPath = this.pathArray[ this.currentPathIndex ] ;
this.leng = myPath.getTotalLength();
this.group.append( myPath );
myPath.attr({
fill: 'none',
"stroke-dasharray": this.leng + " " + this.leng,
"stroke-dashoffset": this.leng
});
this.currentPathIndex++;
myPath.animate({"stroke-dashoffset": 0}, this.timeBetweenDraws, mina.easeout, this.draw.bind( this ) );
};
var myDrawing1 = new Drawing( scratchPathSVG, 't0, 0, s1.8', 800 );
myDrawing1.initDraw();
任何想法/建议将不胜感激：）
先谢谢。