Question

我在javacript中使用svg创建了一个“iphone风格”切换按钮。代码遵循：

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 两个单词首先显示，不透明度允许我更改动画，但不允许我设置为初始属性。我真的想将所有文本一起删除（aTextOn = visible，aTextOff = notVisible）但是我现在会满足于不透明度。我也试过

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

既不起作用

问题2 仅适用于第一次点击...不知道为什么会发生这种情况！

任何帮助都将非常感激！谢谢

PS。如果你有关于平滑过渡梯度变化的提示......那也很酷。

Answer 1

找到不透明度的解决方案......我试图使用

将其设置为初始值

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

但它应该是

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

'svgOpacity'用于动画，而'opacity'用于属性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);

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

1 个答案: