问SVG转换为javascript更改后的点

EN

这里我展示了一个hack，它允许您使用jQuery animate函数分别动画svg animate的每个点。其原理与动画svg的d属性本质上是相同的(因此曲线也可以动画化)。

​

var anim = function() {
  $("svg").animate({top: "+=0"}, { // do a dummy animation on the svg root element
    duration: 1000,
    progress: function(xxx, p) { // 'xxx' not needed, 'p' proceeds from 0 to 1
      $("#shp").attr("points", oldPts.map(function(oldPt, i) { // update the shape
        return +oldPt + (newPts[i] - oldPt) * p; // calculate the changing coordinates
      })); // note coercions: oldPt: string --> number; return value: array --> string
    }
  });
};

var oldPts = $("#shp").attr("points").split(/, *| +/); // get original coords, split string into array
var newPts = [31.8, 40.3, 11.8, 66.7, 89.3, 86.7, 69.3, 20.3]; // the final desired coordinate values

$("button").click(function() {
  (this.firstClk = !this.firstClk) ? anim() : $("#shp").attr("points", oldPts);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div><button>Click to animate, then to reset, then repeat</button></div>
<svg><polygon id="shp" points="21.8,30.3 21.8,76.7 79.3,76.7 79.3,30.3"></polygon></svg>

​

我称之为黑客，因为jQuery并没有真正做好这样做的准备。解决办法是，jQuery animate函数可以在每个动画周期调用一次progress函数，您可以使用该函数来做任何事情。就像变形了一个svg形状。

jQuery通常不能这样做的原因之一--“正常”方式--是因为jQuery动画通常意味着增加或减少数值，比如左边缘距离，或者可以很容易地转换成数值的值，比如颜色。Svg形状坐标存储在复杂的字符串(例如points="0,0 0,50 90,60 ...")中，这些字符串不易递增或递减。这里的黑客只是让你把字符串拆开，修改值，然后重新组装它。很复杂，是的，但实际上并不是那么复杂。

的确，svg动画也可以通过其他方式完成。那么为什么要使用jQuery呢？有两个原因。首先，jQuery动画非常方便。其次，也许更重要的是，通过这种方式，您可以将svg元素属性的动画(包括它们的形状)与其他“合法”的jQuery动画协调起来。因此，您现在可以从屏幕顶部滑动您的新div，更改您的h1标题的颜色，并使您的svg皱眉脸开始微笑，所有这些都有一个jQuery动画。

如果您确实将形状动画与另一个jQuery动画(例如颜色或不透明度等)进行协调，则可以。如果你没有，但是，这个黑客仍然需要你“合法地”动画的东西。如果您只想操作svg元素的形状，则解决方案是将其他一些不重要但可动的参数从原始初始值to...its原始初始值中“动画化”。在这个例子中，我动画的“合法”属性是svg根元素的{top: "+=0"}。这基本上表示“将top值从当前值变为当前值+零”。因此，您并没有真正改变它，但是您确实使用它作为挂起其余动画的“钩子”。

这里还有额外的奖金。jQuery不常用于动画svg图像的另一个原因是，虽然jQuery可以动画svg元素的css属性，比如颜色或不透明度，但它不能动画svg元素的属性(强调: css属性与svg属性)。因此，虽然您可以动画left div的值，但是您不能动画SVG的x属性，即使它们都是指从事物的左边边缘到某个参考点的距离。我在这里展示的hack类型可以允许任何这样的svg属性被动画化，而不仅仅是css属性。

请注意，“合法”jQuery动画的目标和您真正想要动画的形状不一定是同一回事。在本例中，我“合法地”动画了svg根元素(即实际的<svg ...> )，而我正在对嵌入在svg根元素中的svg polygon的形状进行变形。为什么我要为“合法”动画选择svg根元素？当您想要实现这种类型的黑客时，它始终是保证存在的一个元素，因此，使其成为可以持续使用的目标似乎是合理的。你想用什么就用什么。

好好享受吧。