如何在Snap.svg中第二次单击时重置svg坐标
How to reset a svg coordinates on clicking a second time in Snap.svg
我想创建一个图标,当点击它时会变成关闭按钮,当再次点击按钮时,它会再次变成原始图标。到目前为止,我已经完成了代码的第一部分。我知道我可以使用if-else条件,但我不知道该检查什么。如果您正在寻找一个jsfiddle,我很抱歉,因为snap.svg还没有cdn。
<span class="bars" data-icon-name="bars">
<svg id="svg"></svg>
</span>
<script type="text/javascript">
var Paper = Snap('#svg');
var linepaths = Paper.line(20, 20, 100, 20);
var linepaths1 = Paper.line(20, 33, 100, 33);
var linepaths3 = Paper.line(20, 46, 100, 46);
Paper.attr({
stroke:'#fff',
strokeWidth: 7
});
Paper.click(
function (){
linepaths.animate({x1:20,y1:20,x2:75,y2:75},500);
linepaths1.animate({x1:20,y1:75,x2:75,y2:20},500);
linepaths3.animate({x1:0,y1:0,x2:0,y2:0},1);
linepaths3.attr({
stroke:'#2ecc71',
strokeWidth: 7
});
});
</script>
我想你可以做一个基本的切换,这取决于你希望它如何工作。。
Paper.click( function() { if( toggle ) {
buttonOn();
toggle = false;
} else {
buttonOff();
toggle = true; }
} );
function buttonOn() {
linepaths.animate({x1:20,y1:20,x2:75,y2:75},500);
linepaths1.animate({x1:20,y1:75,x2:75,y2:20},500);
linepaths3.animate({x1:0,y1:0,x2:0,y2:0},1);
linepaths3.attr({
stroke:'#2ecc71',
strokeWidth: 7
});
};
function buttonOff() {
linepaths.animate({x1:20,y1:20,x2:100,y2:20},500);
linepaths1.animate({x1:20,y1:33,x2:100,y2:33},500);
linepaths3.animate({x1:20,y1:46,x2:100,y2:46},1);
linepaths3.attr({
stroke:'#2ecc71',
strokeWidth: 7
});
};
jsfiddlehttp://jsfiddle.net/2UZr2/5/
相关文章:
- 如何在 JavaScript 中计算 SVG 路径的椭圆路径坐标
- 使用Javascript获取SVG路径的绝对坐标
- 如何在Snap.svg中第二次单击时重置svg坐标
- 如何在 svg 中查找文本的坐标
- SVG 世界地图坐标
- 使用 jQuery 正确更改 SVG 线坐标
- 在调整窗口大小时刷新 svg 坐标
- 使用 d3 获取鼠标点击 svg 的坐标
- 如何将 SVG 对象的 X Y 坐标的中心转到平面的中心
- 直线的第一个坐标 (x0,y0) 不会影响 SVG 中的起始位置
- 如何获得svg地图的纬度和经度坐标's的起始点(x=0,y=0)
- 为什么HTML/SVG坐标0,0从左上角开始
- SVG 到屏幕坐标
- 无需绘图即可获得SVG路径坐标
- 如何计算(SVG) X/Y坐标的平移和旋转(在JS/D3.js)
- 我如何创建一个svg精灵,然后获得每个svg的坐标
- 在html文件中嵌入svg坐标的最佳方法是什么?
- Gnuplot:网站上嵌入的交互式SVG图形在缩放时显示错误的鼠标坐标
- 检测正在悬停的svg坐标
- 在平移和缩放后单击SVG坐标