用父DIV进行SVG伸展

Question

我正在尝试使SVG响应，所以当窗口重新调整大小时，我的svg也会调整大小并填充第一次查看时的父div。

这是小提琴 - 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);

请注意 这与我正在进行的工作并不完全相同，但我试图尽可能接近工作实例。

我不想要

我希望svg在窗口大小上自动调整大小和填充父div。

Answer 1

我不知道这是不是你所追求的，但这是怎么回事？

Demo fiddle

您需要将viewBox和preserveAspectRatio属性应用于SVG。此外，如果您希望SVG与其父<div>一起缩放，则不应将宽度和高度设置为固定值。而是将它们设置为未设置，以使默认值为“100％”。