Question

我试图将通过AJAX加载的SVG图像置于标签中。我正在使用SVGPan.js库进行平移和缩放。当svg首次加载时，我使用下面的代码对其进行缩放。

// Get handle on SVG Document
var svgDoc = document.getElementById("objSVG").getSVGDocument();   
var svgElementMainG = svgDoc.getElementById('mainG');

// Get current div dimensions
var divHeight = document.getElementById("svgCont").offsetHeight;
var divWidth = document.getElementById("svgCont").offsetWidth;

// Get SVG Documents width
var SvgHeight = svgElementMainS.getAttribute("height").replace("px", "");
var SvgWidth = svgElementMainS.getAttribute("width").replace("px", "");

var HeightPadding = 45.5;


// Calculate scale based on height
var HeightPecent = (divHeight - (HeightPadding * 2)) / SvgHeight;
var WidthPecent = (divWidth / SvgWidth);

// This works great and scales nicely from top to bottom
svgDoc.getElementById("mainG").setAttribute("transform", "scale(" + HeightPecent + ")");

但我无法弄清楚X应该在下面是什么，以保持它的重心

 svgDoc.getElementById("mainG").setAttribute("transform", "scale(" + HeightPecent + ") translate(" + ??X?? + ",0)");

这是HTML / CSS，但我希望通过转换来实现这一点，如果可能或推荐，不一定是css。

<div id="svgCont" style="border: 1px solid #E0E0E0; background-color: white; margin-left: auto; margin-right: auto; display: block;">                 
   <object id="objSVG" style="width: 100%; height: 700px; display:block;">
   </object>
</div>

中心SVG使用SVG Transform加载到Object标签中

0 个答案: