<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<style><!--
    body {
        margin: 0;
    }
    object {
        background: whitesmoke;
    }
    div.caption {
        margin: 5px 10px;
    }
--></style>
</head>
<body>

<object data="test.svg"></object>
<div class="caption">geomSVG example</div>

<script src="geomSvgBbox.js"></script>
<script src="geomSvgStyle.js"></script>
<script><!--
window.addEventListener('load', function () {
    var obj = document.getElementsByTagName('object')[0],
        svg = obj.contentDocument.documentElement,
        b = new SvgBbox(svg),
        s = new SvgStyle(svg, b);

    b.width = 500; // è¡¨ç¤ºæ¨ªå¹…. ç„¡æŒ‡å®šãªã‚‰ãƒ–ãƒ©ã‚¦ã‚¶æ¨ªå¹…
    b.fringe = 10; // å‘¨ç¸ãƒ”ã‚¯ã‚»ãƒ«æ•°. ç„¡æŒ‡å®šãªã‚‰ã‚¼ãƒ
    // b.vaspOption = 1.3; // æ¨ªã«å¯¾ã™ã‚‹ç¸¦ã®è£œæ£æ¯”çŽ‡
    b.calc('border');

    s.setTop('municipality');
    s.setTop('border');
    s.setTop('pubs');
    s.setTop('hospitals');
    s.setStrokeWidth('hospitals', 1);
    s.setStrokeWidth('border', 1);
    s.setStrokeWidth('voting_areas', 0.1);
    s.setRadius('hospitals', 4);
    s.setRadius('pubs', 40000, true); // ç¬¬3å¼•æ•° çœŸãªã‚‰åº§æ¨™å€¤ã§æŒ‡å®š
    
    s.css('#border { fill: none; stroke: lightblue }');
    s.css('#hospitals { fill: white; stroke: gray }');
    s.css('#municipality { fill: brown }');
    s.css('#pubs { fill: green; opacity: 0.5 }');
    s.css('#voting_areas { fill: wheat; stroke: gray }');
});
//--></script>
</body>
</html>