從使用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中刪除單個對象

回答

相關問題