Größe ändern Svg Elemente mit Skala Eigenschaft

Question

Ich mache ein kleines Projekt. In diesem muss ich das Element wie die Ellipse, die ich gezeichnet habe, skalieren. Ich weiß, dass wir die Größe der Ellipse ändern können, indem wir die mousemove-Eigenschaft wie folgt aufspüren Example.

function mouseMove(e) {} 

Aber ich bin neugierig, wie es funktioniert, wenn wir transfrom und Skala Eigenschaft für Elemente der Größe ändern. Ich lese einige Dokumentationsarbeiten in w3.org in diesem link Ich bin nicht in der Lage zu verstehen, wie Skalierungseigenschaften angewendet werden können, was einige Matrixtransformationen beinhaltet.

1. Bitte erklären Sie, wie Sie mit der Skalierungs- und Transformationseigenschaft die Größe der Elemente ändern, indem Sie die Mausbewegung mit einem Beispiel verfolgen?

Answer 1

Hier ist ein einfaches Beispiel eine Ellipse zeigt Größe auf der von der Ellipse aktuellen Abstand der Maus , ohne in Matrizen immer basierend Wechsel: https://jsfiddle.net/aaqs1wf0/ : https://jsfiddle.net/aaqs1wf0/1/

SVG

<svg version="1.0" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 200 200" width="200px" height="200px"> 
    <ellipse cx="100" cy="100" rx="20" ry="10"/>  
</svg> 

Javascript (dies enthielt unnötige Einstellung der Mitte, siehe Update unten)

var ellipse = document.getElementsByTagName("ellipse")[0]; 
var centerX = ellipse.getAttribute("cx"); 
var centerY = ellipse.getAttribute("cy"); 

window.addEventListener("mousemove", function(event) { 
    var x = event.clientX - centerX; // absolute distance from center 
    if (x<0) x = x * -1; 
    var y = event.clientY - centerY; 
    if (y<0) y = y * -1; 
    var scaleX = x/centerX; // proportional distance from center 
    var scaleY = y/centerY; 
    ellipse.setAttribute("cx", centerX/scaleX); // adjust the centers when adjusting scale so that it stays in one place. 
    ellipse.setAttribute("cy", centerY/scaleY); 
    ellipse.setAttribute("style","transform: scale(" + scaleX + ", " + scaleY + ")"); // scale the ellipse 
}); 

Aktualisiert JS (die transform-origin Zentrum zu setzen verwendet, und matrix(), wie gewünscht, obwohl ich scale() denke immer noch funktioniert)

var ellipse = document.getElementsByTagName("ellipse")[0]; 
var centerX = ellipse.getAttribute("cx"); 
var centerY = ellipse.getAttribute("cy"); 

window.addEventListener("mousemove", function(event) { 
    var x = event.clientX - centerX; // absolute distance from center 
    if (x<0) x = x * -1; 
    var y = event.clientY - centerY; 
    if (y<0) y = y * -1; 
    var scaleX = x/centerX; // proportional distance from center 
    var scaleY = y/centerY; 
    ellipse.setAttribute("style","transform: matrix(" + scaleX + ",0,0, " + scaleY + ",0,0); transform-origin: 100px 100px;"); // scale the ellipse 
}); 

Im Grunde ist es die Koordinaten der Maus nimmt, vergleicht ihn von den Koordinaten das Zentrum der Ellipse, dann skaliert es auf die proportionale Differenz. Beachten Sie, dass es keine eingebaute function mouseMove() (wie in Ihrem Link), sondern ein mousemove Ereignis gibt.