将 SVG 定位在浏览器窗口的中间

Question

I have the following SVG definition and I can't seem to position the SVG window at the very center of the screen even though I specify the viewBox co-ordinates.

var width = 1000, height = 500;

var svg = d3.select("body").append("svg")
            .attr("width", width)
            .attr("height", height);

svg.append("defs").selectAll("marker")
            .data(["suit", "licensing", "resolved"])
            .enter().append("marker")
            .attr("id", function (d) {
                return d;
            })
            .attr("viewBox", "100 -100 1000 500")
            .attr("preserveAspectRatio", "xMidYMid meet")
            .attr("display", "block")            
            .attr("refX", 25)
            .attr("refY", 0)
            .attr("markerWidth", 6)
            .attr("markerHeight", 6)
            .attr("orient", "auto")
            .append("path")
            .attr("d", "M0,-5L10,0L0,5 L10,0 L0, -5")
            .style("stroke", "#4679BD")
            .style("opacity", "0.6");

How do I position the SVG at the very center of my browser window?

Answer 1

If you try to create an SVG element and have it centered on the page, then I guess it would be a simple problem of centering a DOM node. But first you have to retrieve the SVG DOM node, which is different from your svg variable.

Using the technique described here: https://davidwalsh.name/css-vertical-center

svgElement = document.getElementsByTagName("svg")[0];

svgElement.style.position = "relative";
svgElement.style.top = "50%";
svgElement.style.left = "50%";
svgElement.style.transform = "translate(-50%, -50%)";

Demo: http://jsfiddle.net/cgupL5mk/