SVG 尺寸在悬停时永久更改答案

【问题标题】：SVG dimensions permanently changed on hoverSVG 尺寸在悬停时永久更改
【发布时间】：2016-05-08 03:39:08
【问题描述】：

我在玩 Snap，但遇到了一个问题。
我有 this code，我无法在 JSFiddle 上正确设置它，因为我不太习惯它，所以 here's the working version。
我想要实现的是让它在悬停时变宽并在鼠标离开时重置，我正在使用这两个功能来实现：

function shiftBox(box) {
  box.animate({
    width: parseInt(box.node.getAttribute("width")) + 50,
    height: parseInt(box.node.getAttribute("height")) + 50,
    x: parseInt(box.node.getAttribute("x")) - 25,
    y: parseInt(box.node.getAttribute("y")) - 25
    }, 1500, mina.elastic);
  }

function resetBox(box) {
  box.animate({
    width: parseInt(box.node.getAttribute("width")) - 50,
    height: parseInt(box.node.getAttribute("height")) - 50,
    x: parseInt(box.node.getAttribute("x")) + 25,
    y: parseInt(box.node.getAttribute("y")) + 25
    }, 1500, mina.elastic);
}

但是，当以高速悬停在其中时，尺寸会永久改变，并且会向左上角移动一点。我猜发生的是一个函数在另一个函数有时间完全更改值之前被调用。是否有一个 JS 函数可以让一个函数等到另一个函数完成，或者我应该存储我需要预先重置它的值？

【问题讨论】：

标签： javascript html svg snap.svg

【解决方案1】：

存储原始值，以便您可以随时返回它们。 FWIW 您的代码无法正常工作，因为它被跨域阻止了。

var s = Snap('#svg');


  rect = s.selectAll('.rect');
  text = s.select('.text');

  var shifters = [];

  for (i = 0, l = rect.length; i < l; ++i) {
    shifters.push(new Shifter(rect[i]));
  }

  text.hover(function() {
    for (i = 0, l = rect.length; i < l; ++i) {
      shifters[i].shiftBox();
    }
  }, function() {
    for (i = 0, l = rect.length; i < l; ++i) {
      shifters[i].resetBox();
    }
  });



function Shifter(box) {
    this.box = box;
    this.x = box.node.x.baseVal.value;
    this.y = box.node.y.baseVal.value;
    this.width = box.node.width.baseVal.value;
    this.height = box.node.height.baseVal.value;
}
 
Shifter.prototype.shiftBox = function() {
  this.box.animate({
    width: this.width + 50,
    height: this.height + 50,
    x: this.x - 25,
    y: this.y - 25
  }, 1500, mina.elastic);
};

Shifter.prototype.resetBox = function() {
  this.box.animate({
    width: this.width,
    height: this.height,
    x: this.x,
    y: this.y
  }, 1500, mina.elastic);
};

html,
body {
  width: 100%; height: 100%; padding: 0; margin: 0;
}

<body>
  <svg id="svg" height="100%" width="100%">
    <rect class="rect" x="0" y="0" fill="#540018" width="600" height="600"/>
<rect class="rect" x="25" y="25" fill="#660022" width="550" height="550"/>
<rect class="rect" x="50" y="50" fill="#75002D" width="500" height="500"/>
<rect class="rect" x="75" y="75" fill="#7F0034" width="450" height="450"/>
<rect class="rect" x="100" y="100" fill="#8C0040" width="400" height="400"/>
<rect class="rect" x="125" y="125" fill="#99004D" width="350" height="350"/>
<rect class="rect" x="150" y="150" fill="#AA005D" width="300" height="300"/>
<rect class="rect" x="175" y="175" fill="#BA006F" width="250" height="250"/>
<rect class="rect" x="200" y="200" fill="#CE0084" width="200" height="200"/>
<rect class="rect" x="225" y="225" fill="#E2009D" width="150" height="150"/>
<text class="text" transform="matrix(1 0 0 1 244.3037 287.0989)"><tspan x="0" y="0" font-family="'Perpetua'" font-size="36">HOVER</tspan><tspan x="14.643" y="43.2" font-family="'Perpetua'" font-size="36">HERE</tspan></text>
<rect class="trigger" x="225" y="225" fill="none" width="150" height="150"/>

  </svg>
  <script src="http://github.com/adobe-webplatform/Snap.svg/raw/master/dist/snap.svg-min.js"></script>

</body>

【讨论】：