通过javascript更改SVG过渡到点

Question

我有一个简单的SVG，只是一个正方形。我试图通过CSS来修改它，但我似乎无法得到它的工作。我用“填充：”改变了颜色，但我似乎无法得到“要点：”的工作。所以我成功地用javascript setAttribute修改了它，但它会很好地进行某种过渡。我试过“过渡：.1s缓解;”但只适用于填充。谢谢。

\t $("svg").click(function(){ 
 
\t \t document.getElementById('pointz').setAttribute("points", "31.8,40.3 11.8,66.7 89.3,86.7 69.3,20.3"); 
 
\t });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<p>Click the square below</p> 
 
    <svg viewBox="0 0 194.6 185.1"> 
 
\t <polygon id="pointz" fill="#000" points="21.8,30.3 21.8,76.7 79.3,76.7 79.3,30.3"/> 
 
    </polygon> 
 
    </svg>

Answer 1

这里我展示一个黑客，使您可以使用jQuery animate功能独立动画的SVG polygon的每一个点。该原则基本上与使动画的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>

我称之为hack，因为jQuery没有真正建立起来，以做到这一点。解决方法是在每个动画周期中，jQuery animate函数可以调用一次progress函数，并且可以使用该函数来做任何事情。像变形svg形状一样。

jQuery通常无法做到这一点的“正常”方式之一是jQuery动画通常用于递增或递减数值，如左边距或可轻松转换为数值的值，就像一种颜色。 Svg形状坐标存储在复杂的字符串中（例如points="0,0 0,50 90,60 ..."），这些字符串不容易增加或减少。这里的黑客只是让你把字符串分开，改变它的值，然后重新组装它。复杂，是的，但事实并非如此复杂。

确实，svg动画也可以通过其他方式完成。那么为什么要使用jQuery？两个原因。首先，jQuery动画非常方便。其次，也许更重要的是，通过这种方式，您可以将svg元素属性（包括其形状）的动画与其他“合法”jQuery动画进行协调。因此，您现在可以沿屏幕顶部滑动新的div，更改h1标题的颜色，和使您的脸部开始微笑，全部使用一个jQuery动画。

如果你确实使用另一个jQuery动画（例如颜色或不透明等）来协调形状动画，那么很好。然而，如果你不这样做，那么这个黑客仍然需要你“合法”动画。如果你只想操纵一个svg元素的形状，解决方法是将其他一些不重要的动画参数从其原始起始值“设置为......原始起始值”。在这个例子中，我创建的“合法”属性是svg根元素的{top: "+=0"}。这基本上是说：“将top的值从其当前值增加到当前值加零”。因此，你并没有真正改变它，但你确实使用它作为悬挂动画剩余部分的“钩子”。

这里还有额外的好处。 jQuery并不常用于动画svg图像的另一个原因是，虽然jQuery可以为svg元素（如颜色或不透明度）的css属性制作动画，但不能为svg元素的属性制作动画（强调：css属性vs svg属性）。因此，尽管你可以动画一个HTML div的left值，你无法动画的SVG rect的x属性，即使它们都指的是距离的东西的左边缘有一定的参考点。我在这里展示的黑客类型可以允许任何这样的svg属性被动画，而不仅仅是css属性。

请注意，“合法”jQuery动画的目标和您真正想要动画的形状不必是同一件事。在这个例子中，我是“合法地”动画svg根元素（即实际的<svg ...>），而我正在变形嵌入在该svg根元素中的svg polygon的形状。为什么我选择“合法”动画的根元素svg？当你想要实现这种类型的黑客时，它总是保证在那里，所以把它作为一个可以持续使用的目标似乎是合理的。你可以使用任何你想要的。

享受。