examples/playback-controls.svg

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
    width="400" height="200" viewBox="-200.0 -100.0 400 200" onload="svgOnLoad(event);">
<defs>
</defs>
<rect x="-200" y="-100" width="400" height="200" fill="#eee" />
<circle cx="0" cy="0" r="40" fill="green" />
<circle cx="0" cy="0" r="0" fill="gray">
<animate attributeName="cx" dur="8s" values="-100;0;100;0;-100" keyTimes="0;0.25;0.5;0.75;1" repeatCount="indefinite" fill="freeze" />
<animate attributeName="cy" dur="8s" values="0;-100;0;100;0" keyTimes="0;0.25;0.5;0.75;1" repeatCount="indefinite" fill="freeze" />
<animate attributeName="r" dur="8s" values="0;40;0;40;0" keyTimes="0;0.25;0.5;0.75;1" repeatCount="indefinite" fill="freeze" />
</circle>
<rect x="0" y="0" width="0" height="0" fill="silver">
<animate attributeName="x" dur="8s" values="-100;-20;100;-20;-100" keyTimes="0;0.25;0.5;0.75;1" repeatCount="indefinite" fill="freeze" />
<animate attributeName="y" dur="8s" values="0;-120;0;80;0" keyTimes="0;0.25;0.5;0.75;1" repeatCount="indefinite" fill="freeze" />
<animate attributeName="width" dur="8s" values="0;40;0;40;0" keyTimes="0;0.25;0.5;0.75;1" repeatCount="indefinite" fill="freeze" />
<animate attributeName="height" dur="8s" values="0;40;0;40;0" keyTimes="0;0.25;0.5;0.75;1" repeatCount="indefinite" fill="freeze" />
</rect>
<text x="0" y="1" font-size="30" fill="yellow" text-anchor="middle" dominant-baseline="central">0<animate attributeName="visibility" dur="8s" values="visible;hidden;hidden" keyTimes="0;0.25;1" repeatCount="indefinite" fill="freeze" /></text>
<text x="0" y="1" font-size="30" fill="yellow" text-anchor="middle" dominant-baseline="central">1<animate attributeName="visibility" dur="8s" values="hidden;visible;hidden;hidden" keyTimes="0;0.25;0.5;1" repeatCount="indefinite" fill="freeze" /></text>
<text x="0" y="1" font-size="30" fill="yellow" text-anchor="middle" dominant-baseline="central">2<animate attributeName="visibility" dur="8s" values="hidden;hidden;visible;hidden;hidden" keyTimes="0;0.25;0.5;0.75;1" repeatCount="indefinite" fill="freeze" /></text>
<text x="0" y="1" font-size="30" fill="yellow" text-anchor="middle" dominant-baseline="central">3<animate attributeName="visibility" dur="8s" values="hidden;hidden;visible;visible" keyTimes="0;0.5;0.75;1" repeatCount="indefinite" fill="freeze" /></text>
<g id="scrub">
<path d="M-168.0,90.0 L168.0,90.0" stroke="#ccc" stroke-width="4" stroke-linecap="round" />
<rect x="-168.0" y="90.0" width="0" height="0.001" stroke="#05f" stroke-width="4" stroke-linejoin="round">
<animate attributeName="width" dur="8s" values="0;336" keyTimes="0;1" repeatCount="indefinite" fill="freeze" />
</rect>
<g id="scrub-capture" data-xmin="-168.0" data-xmax="168.0" data-totaldur="8" data-startdelay="0" data-enddelay="0" data-pauseonload="0">
<rect x="-170.0" y="80.0" width="340" height="20" fill="rgba(255,255,255,0)" />
<circle cx="-168.0" cy="90.0" r="6" fill="#05f" id="scrub-knob" visibility="hidden">
<animate attributeName="cx" dur="8s" values="-168.0;168.0" keyTimes="0;1" repeatCount="indefinite" fill="freeze" />
</circle>
</g>
<g id="scrub-play" visibility="hidden">
<rect x="-191.0" y="86.0" width="8" height="8" fill="#05f" stroke="#05f" stroke-width="8" stroke-linejoin="round" />
<path d="M-191.0,86.0 v8.0 l8.0,-4.0 Z" fill="#eee" />
</g>
<g id="scrub-pause" visibility="hidden">
<rect x="-191.0" y="86.0" width="8" height="8" fill="#05f" stroke="#05f" stroke-width="8" stroke-linejoin="round" />
<rect x="-190.0" y="86.0" width="2.0" height="8.0" fill="#eee" />
<rect x="-186.0" y="86.0" width="2.0" height="8.0" fill="#eee" />
</g>
</g>
<script>/*<![CDATA[*/
/* Animation playback controls generated by drawsvg */
/* https://github.com/cduck/drawsvg/ */
function svgOnLoad(event) {
    /* Support standalone SVG or embedded in HTML or iframe */
    if (event && event.target && event.target.ownerDocument) {
        svgSetup(event.target.ownerDocument);
    } else if (document && document.currentScript
               && document.currentScript.parentElement) {
        svgSetup(document.currentScript.parentElement);
    }
}
function svgSetup(doc) {
    var svgRoot = doc.documentElement || doc;
    var scrubCapture = doc.getElementById("scrub-capture");
    /* Block multiple setups */
    if (!scrubCapture || scrubCapture.getAttribute("svgSetupDone")) {
        return;
    }
    scrubCapture.setAttribute("svgSetupDone", true);
    var scrubContainer = doc.getElementById("scrub");
    var scrubPlay = doc.getElementById("scrub-play");
    var scrubPause = doc.getElementById("scrub-pause");
    var scrubKnob = doc.getElementById("scrub-knob");
    var scrubXMin = parseFloat(scrubCapture.dataset.xmin);
    var scrubXMax = parseFloat(scrubCapture.dataset.xmax);
    var scrubTotalDur = parseFloat(scrubCapture.dataset.totaldur);
    var scrubStartDelay = parseFloat(scrubCapture.dataset.startdelay);
    var scrubEndDelay = parseFloat(scrubCapture.dataset.enddelay);
    var scrubPauseOnLoad = parseFloat(scrubCapture.dataset.pauseonload);
    var paused = false;
    var dragXOffset = 0;
    var point = svgRoot.createSVGPoint();

    function screenToSvgX(p) {
        var matrix = scrubKnob.getScreenCTM().inverse();
        point.x = p.x;
        point.y = p.y;
        return point.matrixTransform(matrix).x;
    };
    function screenToProgress(p) {
        var matrix = scrubKnob.getScreenCTM().inverse();
        point.x = p.x;
        point.y = p.y;
        var x = point.matrixTransform(matrix).x;
        if (x <= scrubXMin) {
            return scrubStartDelay / scrubTotalDur;
        }
        if (x >= scrubXMax) {
            return (scrubTotalDur - scrubEndDelay) / scrubTotalDur;
        }
        return (scrubStartDelay/scrubTotalDur
                + (x - dragXOffset - scrubXMin)
                  / (scrubXMax - scrubXMin)
                  * (scrubTotalDur - scrubStartDelay - scrubEndDelay)
                  / scrubTotalDur);
    };
    function currentScrubX() {
        return scrubKnob.cx.animVal.value;
    };
    function pause() {
        svgRoot.pauseAnimations();
        scrubPlay.setAttribute("visibility", "visible");
        scrubPause.setAttribute("visibility", "hidden");
        paused = true;
    };
    function play() {
        svgRoot.unpauseAnimations();
        scrubPause.setAttribute("visibility", "visible");
        scrubPlay.setAttribute("visibility", "hidden");
        paused = false;
    };
    function scrub(playbackFraction) {
        var t = scrubTotalDur * playbackFraction;
        /* Stop 10ms before end to avoid loop (>=1ms needed on FF) */
        var limit = scrubTotalDur - 10e-3;
        if (t < 0) t = 0;
        else if (t > limit) t = limit;
        svgRoot.setCurrentTime(t);
    };
    function mousedown(e) {
        svgRoot.pauseAnimations();
        if (e.target == scrubKnob) {
            dragXOffset = screenToSvgX(e) - currentScrubX();
        } else {
            dragXOffset = 0;
        }
        scrub(screenToProgress(e));
        /* Global document listeners */
        document.addEventListener('mousemove', mousemove);
        document.addEventListener('mouseup', mouseup);
        e.preventDefault();
    };
    function mouseup(e) {
        dragXOffset = 0;
        document.removeEventListener('mousemove', mousemove);
        document.removeEventListener('mouseup', mouseup);
        if (!paused) {
            svgRoot.unpauseAnimations();
        }
        e.preventDefault();
    };
    function mousemove(e) {
        scrub(screenToProgress(e));
    };
    scrubPause.addEventListener("click", pause);
    scrubPlay.addEventListener("click", play);
    scrubCapture.addEventListener("mousedown", mousedown);
    scrubContainer.setAttribute("visibility", "visible");
    scrubKnob.setAttribute("visibility", "visible");
    if (scrubPauseOnLoad) {
        pause();
        scrub(0);
    } else {
        play();
    }
};
svgOnLoad();
/*]]>*/</script>
</svg>