snapsvg - Pfad zum Cursorzeiger verschieben

Question

Ich habe ein komplexes SVG mit mehreren Pfaden. Ich versuche, die Pfaddaten (d) der Pfade so zu ändern, dass sie der Position des Cursors entsprechen. Wenn sich der Benutzer mit der Maus über die SVG bewegt, bewegen sie sich auf den Zeiger zu.

Was wie eine einfache Animation aussieht, fühlt sich eher wie ein Alptraum an, wenn man bedenkt, dass ich mich nicht sicher bin, was meine Vorgehensweise und die Auswahl der Werkzeuge angeht.

Hier ist meine SVG:

<svg version="1.1" id="graph" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
       viewBox="0 0 222 246.6" style="enable-background:new 0 0 222 246.6;" xml:space="preserve"> 
      <style type="text/css"> 
       .st0{clip-path:url(#SVGID_2_);fill:#52B3F5;} 
       .st1{clip-path:url(#SVGID_2_);fill:#8FDAFF;} 
       .st2{clip-path:url(#SVGID_2_);fill:#0468FF;} 
       .st3{clip-path:url(#SVGID_2_);fill:none;stroke:#0468FF;stroke-miterlimit:10;} 
       .st4{clip-path:url(#SVGID_2_);fill:none;stroke:#8FDAFF;stroke-miterlimit:10;} 
       .st5{clip-path:url(#SVGID_2_);fill:none;stroke:#52B3F5;stroke-miterlimit:10;} 
      </style> 
      <g> 
       <defs> 
        <rect id="SVGID_1_" width="222" height="246.6"/> 
       </defs> 
       <clipPath id="SVGID_2_"> 
        <use xlink:href="#SVGID_1_" style="overflow:visible;"/> 
       </clipPath> 
       <path class="st0" d="M222,233.8c0,3.2-2.6,5.8-5.8,5.8c-3.2,0-5.8-2.6-5.8-5.8c0-3.2,2.6-5.8,5.8-5.8 
        C219.4,228,222,230.6,222,233.8"/> 
       <path class="st0" d="M105.2,150c0,2.1-1.7,3.7-3.7,3.7c-2.1,0-3.7-1.7-3.7-3.7c0-2.1,1.7-3.7,3.7-3.7 
        C103.5,146.2,105.2,147.9,105.2,150"/> 
       <path class="st0" d="M34.4,21.1c0,2.5-2,4.5-4.5,4.5s-4.4-2-4.4-4.5c0-2.5,2-4.4,4.4-4.4S34.4,18.6,34.4,21.1"/> 
       <path class="st1" d="M110.5,207.1c0,3.3-2.7,5.9-5.9,5.9c-3.3,0-5.9-2.7-5.9-5.9c0-3.3,2.7-5.9,5.9-5.9 
        C107.8,201.2,110.5,203.9,110.5,207.1"/> 
       <path class="st2" d="M128.4,207.1c0,3.9-3.2,7.1-7.1,7.1c-3.9,0-7.1-3.2-7.1-7.1c0-3.9,3.2-7.1,7.1-7.1 
        C125.3,200.1,128.4,203.2,128.4,207.1"/> 
       <path class="st2" d="M22.7,240.8c0,3.2-2.6,5.8-5.8,5.8c-3.2,0-5.8-2.6-5.8-5.8c0-3.2,2.6-5.8,5.8-5.8 
        C20.1,235,22.7,237.6,22.7,240.8"/> 
       <path class="st0" d="M9.2,232.7c0,2.6-2.1,4.6-4.6,4.6S0,235.3,0,232.7s2.1-4.6,4.6-4.6S9.2,230.1,9.2,232.7"/> 
       <polygon class="st3" points="148.1,105.2 106.2,207.1 120.5,207.1 155.4,122.2 "/> 
       <path class="st2" d="M202.5,23.5c0,3.1-2.5,5.7-5.7,5.7s-5.7-2.5-5.7-5.7c0-3.1,2.5-5.7,5.7-5.7S202.5,20.4,202.5,23.5"/> 
       <path class="st2" d="M188.7,17.5c0,1.9-1.5,3.4-3.4,3.4c-1.9,0-3.4-1.5-3.4-3.4c0-1.9,1.5-3.4,3.4-3.4 
        C187.2,14.1,188.7,15.6,188.7,17.5"/> 
       <polygon class="st3" points="184.4,17.1 106.2,207.1 120.5,207.1 196,23.4 194.2,22.4  "/> 
       <polygon class="st4" points="39.4,17 29.5,22.4 27.7,23.3 103.3,207.1 106.3,207.1 117.6,207.1 "/> 
       <polygon class="st3" points="118.7,5.6 105.9,5.6 103.2,5.6 5.8,234.2 6.4,234.6 16,241.4  "/> 
       <polygon class="st5" points="17.3,242.7 121.4,149.5 111.7,140.8 6.3,234.6 9.2,236.7  "/> 
       <polygon class="st5" points="217.3,234.1 111.7,140.8 101.9,149.5 205.8,242.5 206.4,242.1 "/> 
       <polygon class="st4" points="217.3,234.1 120.3,5.6 105.8,5.6 206.4,242.1 "/> 
       <polygon class="st5" points="181.8,15.6 102,87.3 111.7,96.1 194.2,22.4 "/> 
       <polygon class="st5" points="41.7,15.7 29.5,22.4 111.7,96.1 121.6,87.3 "/> 
       <path class="st0" d="M46.9,17.7c0,3-2.4,5.3-5.3,5.3c-3,0-5.3-2.4-5.3-5.3c0-3,2.4-5.3,5.3-5.3C44.5,12.3,46.9,14.7,46.9,17.7"/> 
       <path class="st1" d="M44.2,20.7c0,1.7-1.4,3.1-3.1,3.1s-3.1-1.4-3.1-3.1c0-1.7,1.4-3.1,3.1-3.1S44.2,19,44.2,20.7"/> 
       <path class="st1" d="M31.4,22.3c0,1.5-1.2,2.7-2.7,2.7S26,23.8,26,22.3c0-1.5,1.2-2.7,2.7-2.7S31.4,20.8,31.4,22.3"/> 
       <path class="st2" d="M105,5.6c0,2.1-1.7,3.8-3.8,3.8c-2.1,0-3.8-1.7-3.8-3.8c0-2.1,1.7-3.8,3.8-3.8C103.3,1.9,105,3.5,105,5.6"/> 
       <path class="st2" d="M124.3,5.6c0,3.1-2.5,5.6-5.6,5.6c-3.1,0-5.6-2.5-5.6-5.6c0-3.1,2.5-5.6,5.6-5.6C121.8,0,124.3,2.5,124.3,5.6" 
        /> 
       <path class="st1" d="M123.6,5.6c0,1.7-1.4,3.1-3.1,3.1c-1.7,0-3.1-1.4-3.1-3.1c0-1.7,1.4-3.1,3.1-3.1 
        C122.2,2.5,123.6,3.9,123.6,5.6"/> 
       <path class="st0" d="M186.2,15.7c0,2.5-2.1,4.6-4.6,4.6s-4.6-2.1-4.6-4.6c0-2.5,2.1-4.6,4.6-4.6S186.2,13.2,186.2,15.7"/> 
       <path class="st0" d="M197.8,22.4c0,2.1-1.7,3.8-3.8,3.8c-2.1,0-3.8-1.7-3.8-3.8c0-2.1,1.7-3.8,3.8-3.8 
        C196.1,18.7,197.8,20.3,197.8,22.4"/> 
       <path class="st0" d="M199.4,22.4c0,2.9-2.4,5.3-5.3,5.3c-2.9,0-5.3-2.4-5.3-5.3c0-2.9,2.4-5.3,5.3-5.3 
        C197,17.1,199.4,19.5,199.4,22.4"/> 
       <path class="st1" d="M111.4,5.6c0,3.1-2.5,5.6-5.6,5.6c-3.1,0-5.6-2.5-5.6-5.6c0-3.1,2.5-5.6,5.6-5.6C108.9,0,111.4,2.5,111.4,5.6" 
        /> 
       <path class="st0" d="M142.4,52.6c0,1.1-0.9,2.1-2.1,2.1c-1.1,0-2.1-0.9-2.1-2.1c0-1.1,0.9-2.1,2.1-2.1 
        C141.5,50.5,142.4,51.5,142.4,52.6"/> 
       <path class="st1" d="M132.9,61.7c0,1.6-1.3,3-3,3c-1.6,0-3-1.3-3-3c0-1.6,1.3-3,3-3C131.5,58.8,132.9,60.1,132.9,61.7"/> 
       <path class="st0" d="M149.1,65.5c0,2-1.7,3.7-3.7,3.7s-3.7-1.7-3.7-3.7c0-2,1.7-3.7,3.7-3.7S149.1,63.4,149.1,65.5"/> 
       <path class="st1" d="M140.2,75.1c0,2.9-2.3,5.2-5.2,5.2c-2.9,0-5.2-2.3-5.2-5.2c0-2.9,2.3-5.2,5.2-5.2 
        C137.9,69.9,140.2,72.2,140.2,75.1"/> 
       <path class="st1" d="M221,233.8c0,2.1-1.7,3.8-3.8,3.8c-2.1,0-3.8-1.7-3.8-3.8s1.7-3.8,3.8-3.8C219.4,230.1,221,231.7,221,233.8"/> 
       <path class="st1" d="M209.5,240.7c0,2.1-1.7,3.8-3.8,3.8c-2.1,0-3.8-1.7-3.8-3.8s1.7-3.8,3.8-3.8 
        C207.8,237,209.5,238.7,209.5,240.7"/> 
       <path class="st2" d="M85,52.6c0,1.1-0.9,1.9-1.9,1.9c-1.1,0-1.9-0.9-1.9-1.9c0-1.1,0.9-1.9,1.9-1.9C84.2,50.7,85,51.5,85,52.6"/> 
       <path class="st2" d="M96.1,62c0,1.5-1.2,2.7-2.7,2.7c-1.5,0-2.7-1.2-2.7-2.7c0-1.5,1.2-2.7,2.7-2.7C94.9,59.3,96.1,60.5,96.1,62"/> 
       <path class="st2" d="M9.2,233.7c0,1.6-1.3,2.9-2.9,2.9s-2.9-1.3-2.9-2.9c0-1.6,1.3-2.9,2.9-2.9S9.2,232.1,9.2,233.7"/> 
       <path class="st0" d="M82.7,65.7c0,2.6-2.1,4.7-4.7,4.7c-2.6,0-4.7-2.1-4.7-4.7c0-2.6,2.1-4.7,4.7-4.7C80.5,61,82.7,63.1,82.7,65.7" 
        /> 
       <path class="st0" d="M90.1,75.1c0,1-0.8,1.9-1.9,1.9c-1,0-1.9-0.8-1.9-1.9c0-1,0.8-1.9,1.9-1.9C89.3,73.2,90.1,74.1,90.1,75.1"/> 
       <path class="st2" d="M150.4,105.2c0,1.5-1.2,2.7-2.7,2.7c-1.5,0-2.7-1.2-2.7-2.7c0-1.5,1.2-2.7,2.7-2.7 
        C149.2,102.6,150.4,103.8,150.4,105.2"/> 
       <path class="st2" d="M159.7,123c0,2.2-1.8,4-4,4c-2.2,0-4-1.8-4-4c0-2.2,1.8-4,4-4C157.9,119,159.7,120.7,159.7,123"/> 
       <path class="st1" d="M159.2,88c0,2.2-1.8,4-4,4c-2.2,0-4-1.8-4-4c0-2.2,1.8-4,4-4C157.4,83.9,159.2,85.7,159.2,88"/> 
       <path class="st1" d="M165.2,105.7c0,1.5-1.2,2.7-2.7,2.7c-1.5,0-2.7-1.2-2.7-2.7c0-1.5,1.2-2.7,2.7-2.7 
        C164,103.1,165.2,104.2,165.2,105.7"/> 
       <path class="st2" d="M79.9,104.1c0,2.4-1.9,4.3-4.3,4.3c-2.4,0-4.3-1.9-4.3-4.3c0-2.4,1.9-4.3,4.3-4.3 
        C78,99.7,79.9,101.7,79.9,104.1"/> 
       <path class="st2" d="M109.8,207.1c0,2-1.6,3.6-3.6,3.6c-2,0-3.6-1.6-3.6-3.6c0-2,1.6-3.6,3.6-3.6 
        C108.2,203.5,109.8,205.2,109.8,207.1"/> 
       <path class="st2" d="M71,86.7c0,1.6-1.3,2.9-2.9,2.9s-2.9-1.3-2.9-2.9c0-1.6,1.3-2.9,2.9-2.9S71,85.1,71,86.7"/> 
       <path class="st0" d="M22.7,240.8c0,2-1.7,3.7-3.7,3.7s-3.7-1.7-3.7-3.7c0-2.1,1.7-3.7,3.7-3.7S22.7,238.7,22.7,240.8"/> 
       <path class="st1" d="M123.7,207.1c0,2.8-2.2,5-5,5c-2.8,0-5-2.2-5-5c0-2.8,2.2-5,5-5C121.4,202.1,123.7,204.4,123.7,207.1"/> 
       <path class="st0" d="M114.3,140.8c0,1.7-1.4,3.1-3.1,3.1s-3.1-1.4-3.1-3.1c0-1.7,1.4-3.1,3.1-3.1S114.3,139.1,114.3,140.8"/> 
       <path class="st0" d="M104.6,168c0,1.7-1.4,3.1-3.1,3.1c-1.7,0-3.1-1.4-3.1-3.1c0-1.7,1.4-3.1,3.1-3.1 
        C103.2,164.9,104.6,166.3,104.6,168"/> 
       <path class="st1" d="M94.7,176.6c0,2.2-1.8,4-4,4c-2.2,0-4-1.8-4-4s1.8-4,4-4C92.9,172.7,94.7,174.4,94.7,176.6"/> 
       <path class="st2" d="M121,168c0,0.9,0.7,1.6,1.6,1.6c0.9,0,1.6-0.7,1.6-1.6c0-0.9-0.7-1.6-1.6-1.6C121.7,166.4,121,167.1,121,168" 
        /> 
       <path class="st0" d="M136,164.1c0,1.3,1,2.3,2.3,2.3c1.3,0,2.3-1,2.3-2.3c0-1.3-1-2.3-2.3-2.3C137,161.8,136,162.8,136,164.1"/> 
       <path class="st2" d="M127.5,176.6c0,3.3,2.6,5.9,5.9,5.9c3.3,0,5.9-2.6,5.9-5.9c0-3.3-2.6-5.9-5.9-5.9 
        C130.1,170.7,127.5,173.4,127.5,176.6"/> 
       <path class="st0" d="M125.6,150.1c0,2.7-2.2,5-5,5c-2.7,0-5-2.2-5-5c0-2.7,2.2-5,5-5C123.4,145.2,125.6,147.4,125.6,150.1"/> 
       <path class="st1" d="M103.9,154.9c0,3.8-3.1,6.9-6.9,6.9c-3.8,0-6.9-3.1-6.9-6.9c0-3.8,3.1-6.9,6.9-6.9 
        C100.8,148,103.9,151.1,103.9,154.9"/> 
       <path class="st0" d="M207.3,239.1c0,1.8-1.5,3.3-3.3,3.3s-3.3-1.5-3.3-3.3s1.5-3.3,3.3-3.3S207.3,237.3,207.3,239.1"/> 
      </g> 
      </svg> 

Und mein voll, völlig misslungenen Versuch can be found here

ich die eigentliche Frage erraten wäre, wie das „d“ Endpunkt des Mauszeigers Ich kann so finden Ordne es den Pfaden zu.

Answer 1

cx und cy sind für Kreise und Ellipsen. Außerdem müssen Sie das Attribut d für Pfade nicht ändern.

Alles, was Sie tun müssen, um ein Element zu verschieben, ist eine Translate-Transformation. Dh:

<path ... transform="translate(20, 20)"> 

In-Snap können Sie die Element.transform() Funktion verwenden, um eine Transformation anzuwenden.

Here's a demo wo ich jedes Mal, wenn Sie den Mauszeiger bewegen, jeden Pfad in Richtung des Zeigers verschieben.

function moveFunc(ev, x, y) { 
    //console.log(ev); 
    paths.forEach(function(el) { 
     // Convert screen mouse coords to the equivalent point in SVG coords 
     var pt = cursorPoint(x, y); 
     // Get the "center" of each path by way of its bounding box 
     var b = el.getBBox(); 
     var cx = b.x + b.width/2; 
     var cy = b.y + b.height/2; 
     // Get the direction vector from the path center to the pointer location 
     var dx = pt.x - cx; 
     var dy = pt.y - cy; 
     // Get the current transform (if any) on the path 
     var currentTransform = el.transform().localMatrix; 
     // Add the tranlation that moves the paths a little toward the pointer 
     currentTransform = currentTransform.translate(dx/20, dy/20); 
     el.transform(currentTransform); 
    }); 
} 


// Convert a screen space coordinate to an SVG coordinate 
function cursorPoint(x, y) { 
    var svg = s.node; 
    var pt = svg.createSVGPoint(); 
    pt.x = x; pt.y = y; 
    return pt.matrixTransform(svg.getScreenCTM().inverse()); 
} 

Hoffentlich ist dies genug, um loszulegen. Um die <polygon> Punkte zu verschieben, müssen Sie das Punktarray abrufen und dann jeden Punkt im Array aktualisieren, indem Sie dx, dy hinzufügen.

Sie können die Punkte eines Polygons mit el.node.points ermitteln.

Viel Glück!