David_Knowles

by David_Knowles

HTML

<div class="block">blue block top</div> 
    <div class="svg-wrap-outer">
            <svg version="1.1" baseProfile="basic" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 550 350" preserveAspectRatio="xMinYMin meet">
	            <rect x="0" y="0" width="550" height="350"/>
                <polyline points="0,0 0,350 550,350"/>
                <text x="0" y="50%" width="100%">Simplified example</text>
            </svg>
    </div>
    <div class="block">blue block bottom</div>

CSS

html, body {background-color:pink; margin:0; padding:0; width: 100%;} 
.block {background-color:blue; padding:0; margin:0; height: 50px; color: #fff;}
.svg-wrap-outer {width: 100%; /* padding-top:63.636363636364%; */ position: relative;} 
svg {background-color: cyan; display:block;}
polyline {fill:none; stroke:#000000; stroke-miterlimit:10; stroke-width:30;}
rect {fill:green;}
text {font-size:50px; fill:#fff; stroke:none;}

JavaScript

/* Responsive SVG, Fill the whole parent width using JS fix \\\\\\\\\ */

(function($) {
    // Shell for your plugin code
    $.fn.ratioizeHeight = function() {
        var w = this.width(),
            h = this.height(),
        //ratio = h/w;
        ratio = 0.636363636363;
        return this.each(function() {
            // Do something to each item
            $(this).height(w * ratio);
        });
    }
})(jQuery);


$(function() {
    $("svg").ratioizeHeight();
});

$(window).resize(function(n) {
    var id; // var for delaying resize script a tad
    clearTimeout(id);
    id = setTimeout(doneResizing, 50);
});

function doneResizing(){
    var i = 0; // log resizing
    $("svg").ratioizeHeight();
     i++;
    console.log("Done resizing " + i);
}