从使用Javascript创建的svg中删除单个对象

我已经在javacript中使用svg创建了“iphone style”切换按钮。代码如下：从使用Javascript创建的svg中删除单个对象

var btnsvg; 
var aCircle; 
var aTextOn; 
var aTextOff; 

function circle_click(evt) { 
    var circle = evt.target; 

    if ($(circle).position({ svgCx: 20 })) { 
     $(circle).animate({ svgCx: 50 }, 400); 
     $(aTextOn).animate({ svgFillOpacity: 1.0 }, 400); 
     $(aTextOff).animate({ svgFillOpacity: 0.0 }, 400); 
    } 
    else { 
     $(circle).animate({ svgCx: 20 }, 400); 
     $(aTextOn).animate({ svgFillOpacity: 0.0 }, 400); 
     $(aTextOff).animate({ svgFillOpacity: 1.0 }, 400); 
    } 
} 

function drawToggleButton() { 

    $('.toggleButton').each(function() { 
     btnsvg = $(this).svg().svg('get'); 
     btnsvg.linearGradient('btnGrad', 
      [[0, '#000000'], [1, '#000000', 0.32]], 50.168, 28, 50.168, 3, 
      { gradientUnits: 'userSpaceOnUse' 
      }); 
     btnsvg.linearGradient('offGrad', 
      [[0, '#1F1F1F'], [1, '#A2A1A1']], 32.6685, 28, 32.6685, 3, 
      { gradientUnits: 'userSpaceOnUse' 
      }); 
     btnsvg.linearGradient('onGrad', 
      [[0, '#1A2D49'], [1, '#304866']], 32.6685, 28, 32.6685, 3, 
      { gradientUnits: 'userSpaceOnUse' 
      }); 
     btnsvg.rect(10, 10, 50, 20, 10, 10, 
      { fill: 'url(#offGrad)', stroke: 'black', strokeWidth: 1 
      }); 
     aCircle = btnsvg.circle(20, 20, 10, { onclick: 'circle_click(evt)', fill: 'url(#btnGrad)' }); 

    }); 
}

它那种作品......

问题1个这两个词都显示在第一，不透明度可以让我改变对动画，但不允许我设置为INTIAL属性。我真的很想一起删除文本（aTextOn =可见，aTextOff = notVisible）但我现在会为不透明度做出决定。我也试过

$(aTextOff).text({fill: 'rgb(0,0,0,0.0)'});

没有工作或者

问题2 只适用于第一次点击...不知道为什么会这样！

任何帮助将超级赞赏！谢谢

ps。如果你有关于平滑过渡渐变的提示，那也会很酷。

来源

2013-03-21 bluebela84

我不知道，如果你想要一个'普通'的JS解决方案，但如果库是一个选项，我强烈建议D3.js。有关不透明度转换的示例，请参阅http://blog.visual.ly/creating-animations-and-transitions-with-d3-js/。 – cmonkey 2013-03-21 17:08:24

有点想用插件来做...看到下面的解决方案:) – bluebela84 2013-03-21 19:48:03

发现不透明度的解决方案...我试图把它初始化使用

$(aTextOff).text({fill: 'white', svgOpacity: 1.0});

但它应该是

$(aTextOff).text({fill: 'white', opacity: 1.0});

“svgOpacity”是动画，而“不透明度”是为属性http://keith-wood.name/svg.html

我也移动了这个圆，以便它在文本之后创建，因此将在最上面。至于click函数，我在div上创建了一个属性，其中呈现svg按钮以告诉我什么状态（true/false）是基于该动画的圆和文本创建切换效果。代码如下：

function circle_click(evt) { 
    var circle = evt.target;  
    var currentState = $('.toggleButton').attr('value') == 'true'; 

    if (!currentState) { 
     $(circle).animate({ svgCx: 50 }, 400); 
     $(aTextOn).animate({ svgOpacity: 1.0 }, 400); 
     $(aTextOff).animate({ svgOpacity: 0.0 }, 400); 
    } 
    else { 
     $(circle).animate({ svgCx: 20 }, 400); 
     $(aTextOn).animate({ svgOpacity: 0.0 }, 400); 
     $(aTextOff).animate({ svgOpacity: 1.0 }, 400); 
    } 

    $('.toggleButton').attr('value', !currentState); 

}

之前，我试图通过调用使用位置下面

$(circle).position({ svgCx: 20 });

但设置，而不是检查，看看如果是这样的位置的位置。

仍然是梯度无解......敬请期待.......我希望

解决方案渐变动画....

我添加的其他矩形与新的灰色将不透明度设置为较低的渐变渐变，并将其放在原始矩形的顶部。

aRect = btnsvg.rect(10, 10, 55, 20, 10, 10, 
    { fill: '#606060', stroke: 'black', strokeWidth: 1 
    }); 
    btnsvg.rect(10, 10, 55, 20, 10, 10, 
    { fill: 'url(#myGrad)', stroke: 'black', strokeWidth: 1 
    });

“aRect”是我在动画与顶部的透明渐变的颜色之一，给人的错觉梯度变化..

$(aRect).animate({ svgFill: '#1A2D49' }, 400);

来源

2013-03-21 18:37:08 bluebela84

从使用Javascript创建的svg中删除单个对象

回答

相关问题