スケールプロパティを使用してsvg要素をサイズ変更する

Question

私は少しのプロジェクトを行っています。その中で私は描いた楕円などの要素のサイズを変更する必要があります。私はExampleのようなmousemoveプロパティを追跡することによって楕円のサイズを変更できることを知っています。

function mouseMove(e) {} 

しかし、私たちは要素のサイズ変更のためtransfromと規模プロパティを使用する場合、それがどのように動作するかを知って好奇心旺盛です。私はこの中でw3.orgでいくつかのドキュメントを読んでいますlinkスケールのプロパティを適用する方法を理解することができません。

1. 例を使ってマウスの動きを追跡することによって要素のサイズを変更するにはスケールとトランスフォームのプロパティを使用する方法を説明してください。ここで

Answer 1

行列に得ることなく、楕円 からマウスの現在の距離に基づいてサイズを変更する楕円を示す基本的な例である： 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 （センターの不必要な調整が含まれています。下のアップデートを参照）

（要求されたとして、私は scale()はまだうまくいくと思うものの、中央を設定する transform-originを使用し、 matrix()）

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 
}); 

更新JS

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 
}); 

基本的には、マウスの座標をとり、の座標と比較します楕円の中心を計算し、それを比例差に比例させます。 function mouseMove()（リンクのような）は組み込まれていませんが、mousemoveというイベントがあります。