Question

通过Illustrator CS5，我从想要制作动画的点开始创建了一个SVG。但是，当我实际实现动画时，它从路径中的另一个点开始。

这是我的SVG动画： https://jsfiddle.net/6q2xb1q4/ 它始于＆＃39; G＆＃39;但我希望从“A＆＃39;”开始。

SVG：

<div id="test">
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" x="0px" y="0px" width="800px" height="154px" viewBox="-5.107 -11 800 154" enable-background="new -5.107 -11 800 154" xml:space="preserve">
        <defs></defs>
        <path class="path" fill="#CCCCCC" stroke="#8B8E89" stroke-width="11" d="M772.284,18.5l-11.515-13H611.487l-14.156,15v42.063L535.768,5.5h-34.5
    l-13.625,10.375v23.813v45.965v7.25h-76.25l-8.375-9.25V46.278l7-6.59h77.625V15.875L475.268,5.5H368.643l-11.688,9.938v87.882
    V15.438L345.769,5.5h-22.375l-12.375,13.375l0,0l0,56.278l-7.125,6.802h-12.75v21.364V81.955h12.75l7.125-6.802l0-56.278
    L297.643,5.5h-193l-99,99l-0.125,14.125l7.375,8.617h24l29.5-30.743h66.378v19.122l11.496,11.621h22.292l12.503-12.621
    l12.664,12.621h19.923L227.893,111V97h22.998v14.002l14.749,16.24h252.504L532.9,111.5V59.493l70.868,67.75h26.014l13.625-11.256
    l12.361,11.256h101.973l14.543-16.873V48.648l-6.195-3.953l6.195-6.195V18.5z M136.393,66.002h-39l22.175-20.828h16.825V66.002z
     M179.06,112.898V31.653V112.898z M266.893,65.028h-38V45.175h38V65.028z M643.407,114.639v-76.32V114.639z M689.893,43.348v43.805
    h35.5v-20.25v20.25h-35.5V43.348h76.195H689.893z" />
    </svg>
</div>

JS：

$(function () {
    var path = $('.path')[0],
        increment = 2,
        progress = 0,
        path_length = path.getTotalLength(),
        draw_timer;

    path.style.strokeDasharray = path.getTotalLength() + ' ' + path.getTotalLength();
    path.style.strokeDashoffset = -path.getTotalLength();

    draw_timer = window.setInterval(drawSVG, 0.06);

    function drawSVG() {
        path.style.strokeDashoffset = -path_length + progress;
        progress += increment;

        if (progress >= path_length) {
            window.clearInterval(draw_timer);
            window.setTimeout(function () {
                progress = 0;
                draw_timer = window.setInterval(drawSVG, 0.06);
            }, 1000);
        }
    }
});

CSS：

#test {
    width: 200px;
}
#test svg {
    width: 100%;
    height: auto;
}

如何设置第一个＆＃34;开始＆＃34;点？通过Illustrator或直接编辑SVG代码？

SVG：如何在路径中设置第一个点？

0 个答案: