svg highlight text by letter

HTML

<div class="wrapper">
    <svg viewbox="0 0 100 100">
        <defs>
            <linearGradient id="letter_mark">
                <stop class="mark begin" offset="0.5" />
                <stop class="mark end" offset="0.5" />
            </linearGradient>
        </defs>
        <text id="sample" x="0" y="0" text-anchor="middle">
            <tspan dominant-baseline="text-before-edge">test long test test long long test</tspan>
            <tspan class="line" x="0" dy="20" dominant-baseline="text-before-edge">some text in eng</tspan>
        </text>
    </svg>
    <br>
        <span class='line'>סם טקסט</span>
</div>

CSS

.wrapper{
    position:relative;
    width: 100%;
    text-align:center;
    border:1px dotted red;
}
svg{
    border:1px dotted blue;
}
body{
    background: #2c2c2c;
}
.mark.begin{
    stop-color: #00b1f1;
}
.mark.end{
    stop-color: #fff;
}
.line{
    fill: url(#letter_mark);
    font-size:45px; 
}

JavaScript

(function(){
    var $marks = $('.mark');
    var $text = $('#sample');
    var pos = 0, idx = 0;
    var fragment = $('#sample .line')[0];
    var len = fragment.textContent.length;
    var plen = fragment.getSubStringLength(0, len);
    $('svg')[0].setAttribute('viewBox',(-plen/2-30)+' 0 '+(plen+60)+' 100');
    $('svg')[0].setAttribute('width',plen+'px');
    
    //return;
    var intv = setInterval(function(){
        idx += 1;
        if (idx>=len)
        {
            pos = 1
            $marks.attr('offset', pos);
            idx = 0;
            return;
        }
        var flen = fragment.getSubStringLength(0, idx);
        pos = flen/plen;
        $marks.attr('offset', pos);
    }, 500);    
})();