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

基于Snap.svg的简单svg按钮

到目前为止，我编写了一个测试代码，如下所示

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

有什么改进的建议吗？谢谢

---

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

---

我真的不认为这是一个建议的地方。。。您似乎对代码没有问题。已编辑。出现了一个或多个问题。它正在切割您按钮的右侧。你必须把你的字体变小一点，然后你会看到：'字体大小'：60-然后将文本居中。

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)
          });

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

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