svg圈子的奇怪行为

Question

我在Stripe.com上看到了图片滑块中圆圈的这种很酷的过渡（显示你最近的图片），我决定尝试重复它。 这似乎只适用于Chrome和Opera

我的尝试变得足够好，但是有一个似乎无法解释的错误。当点击最后一个圆圈时，之前填充的任何圆圈都会逐渐淡出。

JSfiddle

相关HTML：

 <li class="coolBubble selected" onclick="jump_to_position(0)" id="bubble0">
    <svg width="10" height="10" >
        <defs>
            <mask id="center-mask">
                <circle cx="5" cy="5" r="5" fill="#fff"></circle>
            </mask>
        </defs>
        <circle fill="none" stroke="rgb(35,0,0)" stroke-width="1" cx="5" cy="5" r="4" mask="url(#center-mask)"></circle>
    </svg>
</li>

相关CSS：

       .coolBubble circle {

            stroke: rgb(35, 0, 0);
            transition: stroke-width 300ms ease-in-out;
        }

        .selected circle {
            stroke-width: 8px;
        }

相关JS：

function jump_to_position(newIndex) {

    if (currIndex === newIndex) {
        return false;
    }

    var currBubble = '#bubble' + (currIndex);
    var newBubble = '#bubble' + (newIndex);

    $(currBubble).removeClass('selected');
    $(newBubble).addClass('selected');

    currIndex = newIndex;

}