我想将一个简单的SVG路径变形成另一个路径。我想使用JavaScript来控制何时发生这种变化。
这是我创建的JSFiddle链接,作为我尝试实现的简化示例:http://jsfiddle.net/brentmitch/RqRjq/
这里是示例使用的基础代码:
function makeEgg() {
var svgContainer = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svgContainer.setAttribute("version", "1.1");
svgContainer.setAttribute("width", "142.308px");
svgContainer.setAttribute("height", "142.308px");
svgContainer.setAttribute("id", "curvecontainer");
svgContainer.setAttribute("x", "0px");
svgContainer.setAttribute("y", "0px");
var eggPath = document.createElementNS('http://www.w3.org/2000/svg', 'path');
eggPath.setAttribute("id", "eggpath");
eggPath.setAttribute("d", "M126.308,83.154c0,39.297-32.718,56.154-55.154,56.154S16,122.451,16,83.154S50,0,71.154,0S126.308,43.856,126.308,83.154z");
eggPath.setAttribute("fill", "GoldenRod");
svgContainer.appendChild(eggPath);
document.getElementById('svgcontainer').appendChild(svgContainer);
}
function changeToArrow() {
var animateEggPath = document.createElementNS('http://www.w3.org/2000/svg', 'animate');
animateEggPath.setAttribute("id", "egganimation");
animateEggPath.setAttribute("xlink:href", "#eggpath");
animateEggPath.setAttribute("attributeType", "XML");
animateEggPath.setAttribute("attributeName", "d");
animateEggPath.setAttribute("from", "M126.308,83.154c0,39.297-32.718,56.154-55.154,56.154S16,122.451,16,83.154S50,0,71.154,0S126.308,43.856,126.308,83.154z");
animateEggPath.setAttribute("to", "M126.308,95.154c0,39.297-17.333-28.667-39.769-28.667S16,134.451,16,95.154S50,12,71.154,12 S126.308,55.856,126.308,95.154z");
animateEggPath.setAttribute("dur", "4s");
animateEggPath.setAttribute("fill", "freeze");
}
function resetToEgg() {
var animations = document.getElementById('egganimation');
document.getElementById('eggpath').removeChild(animations);
}
使用SVG,将它变成一个蛋形,然后将其变形为箭头,并通过删除animate节点来重置。 我的问题是动画只在第一次运行时有效。 当我尝试重置并再次运行它时,它不再执行动画,而是立即转换为箭头。 我必须重新加载/刷新浏览器窗口才能再次执行动画。
我知道Raphael JavaScript库非常适用于此类动画,但我只想做一个简单的变形。我的访问者大多会使用移动设备,所以我想避免加载库来完成这个简单的动画。