javascript - 使用scale属性调整svg元素的大小

Question

关闭。这个问题是 opinion-based 。目前不接受答案。

---

想要改进这个问题吗？更新问题，以便 editing this post 可以用事实和引文来回答它。 .

已关闭 7 年前。

Improve this question

我正在做一个小项目。在那个例子中，我需要调整元素的大小，例如我绘制的椭圆。我知道我们可以通过跟踪 mousemove 属性来调整椭圆的大小，如下所示 Example .

 function mouseMove(e) {}

但我很想知道当我们使用 transfrom 和 scale 属性来调整大小时它是如何工作的元素。我在 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 (这包含不必要的中心调整，请参阅下面的更新)

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 (根据要求使用 transform-origin 设置中心，并使用 matrix() ，尽管我认为 scale() 仍然有效)

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事件。