Question

基于Snap.svg的简单svg按钮。

到目前为止，我写了一个测试代码。

一个明显的问题是，文本和按钮框架应该被分组为一个单独的元素（至少，我认为是这样），它们会根据点击的位置独立地做出反应。

有任何改善建议吗？感谢。

var s = Snap("#svg");
var block = s.rect(50, 50, 100, 100, 20, 20);

block.attr({
    fill: "rgb(236, 240, 241)",
    stroke: "#1f2c39",
    strokeWidth: 3
});

var text = s.text(70, 135, "Hello!");
text.attr({
    'font-size':100
});

block.attr({
    width: (text.node.clientWidth + 50)
})

// group then as a single svg DOM element
var btn1 = s.g(block, text);

btn1.click(function(e)
          {
              $(e.target).css('opacity',0.5);
              setTimeout(function()
                 {               
                     $(e.target).css('opacity',1);
                 },200)
          });

Answer 1

我不确定你是否有理由使用jquery进行点击，而不是拉斐尔。在不知道更多信息的情况下，我会在您创建的分组对象上使用Raphael点击处理程序。所以你可以做这样的事情，然后再使用一个简单的动画......

jsfiddle here

var btn1 = s.g(block, text);

btn1.click( function( ev ) { 
    btn1.attr({ opacity: 0.5 });
    btn1.animate({ opacity: 1 }, 500 );
});

基于Snap.svg的简单svg按钮

1 个答案: