a1p4.svg

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" onload="setup(evt)" width="100%" height="100%">
<script>
<![CDATA[

var XMLNS = "http://www.w3.org/2000/svg";
var TEST_TEXT = "ABC abc 123 !@#";
function setup(event) {
        var fonts = [ "serif", "sans-serif", "garamond", "arial", "monospace", "cursive", "curier", "fantasy", "inconsolata" ];
        for (var i = 0; i < fonts.length; i++) {
                var bbox = createElement(event.target, "text", { "x": 50, "y": (50 * (i + 1)), "fill": "red", "font-size": 35, "font-family": fonts[i] }, TEST_TEXT).getBBox();
                createElement(event.target, "text", { "x": 100 + bbox.width, "y": (50 * (i + 1)) - 10, "fill": "black", "font-size": 10, "font-family": "monospace" }, round(bbox.x, 2) + "," + round(bbox.y, 2) + "+" + round(bbox.width, 2) + "+" + round(bbox.height, 2));
        }

        var height = event.target.getBBox().height;
        var width = event.target.getBBox().width;
        for (var i = 0; i < height || i < width; i += 10) {
                if (i < width)
                        createElement(event.target, "line", { "x1": i, "x2": i, "y1": 0, "y2": (i % 100 == 0 ? height : 5), "fill-opacity": 0.5, "stroke": "#333" });
                if (i < height)
                        createElement(event.target, "line", { "x1": 0, "x2": (i % 100 == 0 ? width : 5), "y1": i, "y2": i, "fill-opacity": 0.5, "stroke": "#333" });
        }
}

function round(d) {
        var r = Math.round(d * 10) / 10;
        if (Math.round(d) == d)
                return d;
        return r;
}

function createElement(window, type, attributes, txt) {
        var obj = window.ownerDocument.createElementNS(XMLNS, type);
        for (var prop in attributes)
                obj.setAttribute(prop, attributes[prop]);
        if (!!txt)
                obj.appendChild(window.ownerDocument.createTextNode(txt));
        window.appendChild(obj);
        return obj;
}

//]]>
</script>

        <rect x1="0" y1="0" height="600" width="600" stroke="#333" fill="none" />
</svg>