Crocodoc 3D Demo #4

page-svg.css

/* ... */

.crocodoc-page-svg {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

/* ... */

page-svg.js

var assetsLocation = 'http://example.com/path/to/doc/assets/',
    svgSrc = 'page-1.svg';

function Page($el) {
    /* ... */
}

var page = new Page($('.page'));
insertStylesheet(assetsLocation + 'css/stylesheet.css');
loadSVG(svgSrc, assetsLocation, function (err, $svg) {
    if (err) complainLoudly();
    // resize the page so the svg fits
    $('.page').css({
        width: $svg.attr('width'),
        height: $svg.attr('height')
    });
    var $splits = splitSVG($svg, NUM_LAYERS);
    $splits.each(function (i) {
        // insert each SVG split into the appropriate layer
        $('.page-layer').eq(i).html(this);
    });
});


function loadSVG(src, assetsLocation, callback) {
    $.ajax({
        url: assetsLocation + src,
        success: function (response, s, xhr) {
            var newNode, sourceDocumentElement = response.documentElement;
            // replace the relative paths to images embedded in the svg
            // with absolute paths so they work properly when the svg is embedded inline
            $(sourceDocumentElement).find('image').each(function (i, im){
                $(im).attr('xlink:href', assetsLocation + $(im).attr('xlink:href'));
            });
            // importNode shim for IE 9 https://gist.github.com/camupod/5165619
            newNode = importNode(sourceDocumentElement, true);
            callback(null, $(newNode));
        },
        error: function () {
            callback('Error loading SVG ('+ assetsLocation + src +')');
        }
    });
}


function insertStylesheet(src) {
    if (document.createStyleSheet) { // IE
        document.createStyleSheet(src);
        return;
    }
    var ss = document.createElement("link");
    ss.type = "text/css";
    ss.rel = "stylesheet";
    ss.href = src;
    document.getElementsByTagName("head")[0].appendChild(ss);
}

splitSVG.js

/**
 * Split an SVG into several "layers" based on the width*height of elements
 * requires https://code.google.com/p/innersvg/ for IE 9 support
**/

var splitSVG = (function ($) {
    "use strict";

    function splitSVG($svg, maxSplits) {
        $svg = $svg.clone();

        var $svglayer,
            $children = $svg.children(),
            childrenArr = $.makeArray($children),
            numSplits = 0,
            splits = [];

        // put it in the DOM so we can get the width/height of elements
        $('<div>').append($svg).appendTo(document.body).css({left: -10000, top: -10000 });

        // sort the child elements by descending area
        childrenArr.sort(function (a, b) {
            return getArea(b) - getArea(a);
        });

        // pick the first <maxSplits> children as "split" elements
        $(childrenArr.slice(0, Math.min(childrenArr.length - 1, maxSplits - 1))).attr('data-split-el', true);

        // organize elements into layers
        $children.each(function (i, el) {
            // ignore style and defs tags
            if (el.tagName == 'style') return;
            if (el.tagName == 'defs') return;
            var $el = $(el), cls = $el.attr('class');
            $el.attr('class', (cls || '') + ' layer-el-'+numSplits);
            if ($el.attr('data-split-el')) numSplits++;
        });

        for (var i = 0; i <= numSplits; ++i) {
            // clone the base svg
            $svglayer = $svg.clone();
            $svglayer.attr('data-split', i);
            // remove elements from other splits
            removeObjectsFromOtherSplits($svglayer, numSplits, i);
            // IE9 Hack
            fixStylesAndDefs($svglayer);
            splits.push($svglayer);
        }

        // remove it from DOM
        $svg.parent().remove().css({ left: '', top: '' });
        return $(splits);
    }

    function removeObjectsFromOtherSplits($svgRoot, numSplits, splitNum) {
        for (var i = 0; i < numSplits+1; ++i) {
            if (i === splitNum) continue;
            $('.layer-el-'+i, $svgRoot).each(removeEl);
        }
    }

    function removeEl(i, el) {
        el.parentNode.removeChild(el);
    }

    function getArea(el) {
        if (el) {
            var rect = el.getBoundingClientRect() || el.getBBox && el.getBBox();
            if (rect) return rect.width * rect.height;
        }
        return 0;
    }

    // force svg <style> and <def> to work when cloning svg docs (IE 9)
    // requires https://code.google.com/p/innersvg/
    function fixStylesAndDefs($svg) {
        $('style, def', $svg).each(function (i, s) {
            s.innerHTML = s.innerHTML + ' ';
        });
    }

    return splitSVG;
})(jQuery);