SVG stretch with parent DIV

Question

I am trying to make SVG responsive, so when window is re-sized, my svg will resize as well and fill parent div as it is when viewed first time.

Here is the fiddle - http://jsfiddle.net/nhe613kt/321/

HTML

<div id="myConta">
    <div id="myContaList"></div>
</div>

JS

$(window).resize(OwResize);

function OwResize() {
    $("#myConta").height(window.innerHeight - (window.innerHeight / 40));
}

var sideRectW = window.innerWidth / 20,
    sideRectH = window.innerHeight / 20,
    width = window.innerWidth - (window.innerWidth / 50),
    height = window.innerHeight - (window.innerHeight / 40),
    boxW = (width - sideRectW) / 4,
    boxH = (height - sideRectH) / 4,
    boxSize = boxW + boxH,
    xPos1 = sideRectW,
    xPos2 = boxW + sideRectW,
    xPos3 = (boxW * 2) + sideRectW,
    xPos4 = (boxW * 3) + sideRectW,
    yPos1 = 0,
    yPos2 = boxH,
    yPos3 = boxH * 2,
    yPos4 = boxH * 3;

var CreateRect = function (x, y, boxColor, boxId) {
    svgContainer.append("rect")
        .attr("x", x)
        .attr("y", y)
        .attr("id", "rectBox" + boxId)
        .attr("width", boxW)
        .attr("height", boxH)
        .attr("fill", boxColor)
        .attr("class", "hover_group")
        .attr("preserveAspectRatio", "xMaxYMid meet")
        .attr("viewBox", "0 0 " + $("#myConta").width() + $("#myConta").height())
        .attr("onclick", "alert('haha');");
};
var CreateRectWithLength = function (x, y, w, h, boxColor) {
    svgContainer.append("rect")
        .attr("x", x)
        .attr("y", y)
        .attr("width", w)
        .attr("height", h)
        .attr("fill", boxColor);
};
var CreateText = function (x, y, text, textColor, size) {
    svgContainer.append("text")
        .attr("x", x)
        .attr("y", y)
        .attr("fill", textColor)
        .attr("font-size", size)
        .text(text);
};
var CreateText90 = function (x, y, text, textColor, size) {
    svgContainer.append("text")
        .attr("x", x)
        .attr("y", y)
        .attr("fill", textColor)
        .attr("font-size", size)
        .attr("transform", "rotate(-90," + x + 20 + ", " + y + ")")
        .text(text);
};
var svgContainer = d3.select("#myConta")
    .append("svg")
    .attr("id", "myContasvg")
    .attr("width", width)
    .attr("height", height)
    .attr("fill", "#2E2E2E")
    .attr("float", "right")
    .append("g");

CreateRectWithLength(0, 0, sideRectW, window.innerHeight, "Black");
CreateRectWithLength(0, height - sideRectH, width, sideRectH, "Black");

CreateText90(0, yPos3, "Sales", "white", 16);
CreateText(xPos3, height - sideRectH / 5, "Profit", "white", 16);

CreateText(sideRectW / 2, yPos1 + (boxH / 2), "3", "white", 12);
CreateText(sideRectW / 2, yPos2 + (boxH / 2), "2", "white", 12);
CreateText(sideRectW / 2, yPos3 + (boxH / 2), "1", "white", 12);
CreateText(sideRectW / 2, yPos4 + (boxH / 2), "0", "white", 12);

CreateText(xPos1 + (boxW / 2), height - sideRectH / 2, "0", "white", 12);
CreateText(xPos2 + (boxW / 2), height - sideRectH / 2, "1", "white", 12);
CreateText(xPos3 + (boxW / 2), height - sideRectH / 2, "2", "white", 12);
CreateText(xPos4 + (boxW / 2), height - sideRectH / 2, "3", "white", 12);

CreateRect(xPos1, yPos1, "#C0FC3E", 03);
CreateRect(xPos1, yPos2, "#60FC60", 02);
CreateRect(xPos1, yPos3, "#64FE2E", 01);
CreateRect(xPos1, yPos4, "#00FF00", 00);

CreateRect(xPos2, yPos1, "#F6FF33", 13);
CreateRect(xPos2, yPos2, "#AFFC3B", 12);
CreateRect(xPos2, yPos3, "#00FF00", 11);
CreateRect(xPos2, yPos4, "#64FE2E", 10);

CreateRect(xPos3, yPos1, "#FDB500", 23);
CreateRect(xPos3, yPos2, "#8DB723", 22);
CreateRect(xPos3, yPos3, "#AFFC3B", 21);
CreateRect(xPos3, yPos4, "#60FC60", 20);

CreateRect(xPos4, yPos1, "red", 33);
CreateRect(xPos4, yPos2, "#FDB500", 32);
CreateRect(xPos4, yPos3, "#F6FF33", 31);
CreateRect(xPos4, yPos4, "#C0FC3E", 30);



var rectContainer = d3.selectAll("#rectBox33");
var rectX = rectContainer.attr("x");
console.log(rectX);

Please Note This is not exact what I am working on, but I tried to make it as close to working example as I could.

What I don't want

I want svg to resize and fill parent div automatically on window size.

Answer 1

I don't know if this is what you were after, but how is this?

Demo fiddle

You need to apply the viewBox and preserveAspectRatio attributes to your SVG. Also if you want the SVG to scale with its parent <div> then you should not set the width and height to fixed values. Instead leave them unset so that the default to the value "100%".