將SVG定位在瀏覽器窗口的中間

Question

我有以下的SVG定義，我似乎無法將SVG窗口放在屏幕的中心位置，即使我指定了viewBox座標。

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"); 

如何將SVG定位在瀏覽器窗口的中心位置？

Answer 1

如果你嘗試創建一個SVG元素並使它在頁面上居中，那麼我想這將是一個簡單的以DOM節點爲中心的問題。但首先，您必須檢索與您的svg變量不同的SVG DOM節點。

使用此處描述的技術：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%)"; 

演示：http://jsfiddle.net/cgupL5mk/