如何获得svgElement的规模？ [英] How to get the scale of a svgElement?

问题描述

我正在研究svg。

<div id="wrap"  style="transform: scale(2); width:300;height:300;">
  <svg id="real" style="border:red 10px solid;" >
    <rect/>
  </svg>
</div>

var e = document.getElementById("real");
//an api to get scale from e directly ??

我的问题是，如何获得这个svgElement的规模？

My question is, how get the scale of this svgElement?

我试过 e.getCTM（）和 e.getScreen（）。矩阵不包含比例信息。

I tried e.getCTM() and e.getScreen(). The matrix does not contain the scale information.

请给我一些建议。

推荐答案

另一个SO答案显示如何使用<$ c $获取元素相对于文档的比例c> element.getBoundingClientRect（）。width / element.offsetWidth 。但是， svg 元素没有 offsetWidth 属性。因此，一种解决方案是暂时将offsetWidth-able元素添加到 svg 元素，例如a div ，读取此临时助手的比例，然后将其删除。如果插入的元素通过CSS应用了意外的缩放变换（如代码片段所示），则插入的元素的样式应为 transform：scale（1）; 直接应用于它。

Another SO answer shows how to get the scale of an element relative to the document using element.getBoundingClientRect().width / element.offsetWidth. However, the svg element does not have the offsetWidth property. Therefore, one solution is to temporarily prepend a "offsetWidth-able" element to the svg element, e.g. a div, read the ratio on this temporary helper, and then delete it. On the off chance that the inserted element will have an unexpected scale transform applied to it through CSS (as shown in the code snippet), this inserted element should have a style of transform: scale(1); applied to it directly.

更新：当包含比例尺的CSS变换直接应用于 svg 元素本身。在这种情况下，需要解析样式，可以使用 getComputedStyle 和 getPropertyValue 来完成，并提取比例值从返回的矩阵字符串。然后需要乘以前置 div 的相对比例。

Update: A further complication arises when a CSS transform including a scale is applied directly to the svg element itself. In this case, parsing of the style is required which can be accomplished using getComputedStyle and getPropertyValue, and extracting the scale value from the returned matrix string. This then needs to be multiplied by the relative scale of the prepended div.

进一步更新：此解决方案目前似乎无法在Safari中使用，因为浏览器无法识别 insertAdjacentHTML ，尽管我可以找到的文档说它应该。 （这是一个Safari错误还是我错过了什么？）但是，该解决方案在Firefox和Chrome中有效。

Further Update: This solution does not appear to currently work in Safari because the browser is not recognizing insertAdjacentHTML in spite of the fact that the documentation I can find says it should. (Is this a Safari bug or am I missing something?) However, the solution does work in Firefox and Chrome.

var e = document.getElementById("real");
var computedTransform = window.getComputedStyle(e).getPropertyValue("transform");
if (computedTransform === "none") {
  eDirScale = 1;
} else {
  var matrix = computedTransform.match(/matrix\(([^\)]*)\)/)[1].split(/, *| +/);
  var scaleX = Math.sqrt(matrix[0] * matrix[0] + matrix[1] * matrix[1]);
  var scaleY = Math.sqrt(matrix[2] * matrix[2] + matrix[3] * matrix[3]);
  if (scaleX !== scaleY) throw "non-uniform scaling";
  eDirScale = scaleX;
}
var eRelScale = e.getBoundingClientRect().width / e.offsetWidth;
e.insertAdjacentHTML('beforebegin', '<div id="temporaryPrepended" style="transform: scale(1)"></div>');
var prepended = document.getElementById("temporaryPrepended");
var pRelScale = prepended.getBoundingClientRect().width / prepended.offsetWidth;
prepended.parentNode.removeChild(prepended);
var scale = pRelScale * eDirScale;

document.write("<p>scale directly on 'svg': " + eDirScale + "</p>");
document.write("<p>scale on 'svg' relative to document: " + eRelScale + ", i.e. doesn't work in e.g. Firefox and, while it might work in Chrome (in Feb 2016), apparently won't in the near future</p>");
document.write("<p>scale on prepended 'div' relative to document: " + pRelScale + "</p>");
document.write("<p>total scale on 'svg' relative to document: " + scale + "</p>");

div {
  transform: scale(4);
}

<div id="wrap"  style="transform: scale(2); width:300;height:300;">
  <svg id="real" style="transform: translate(10px, 10px) scale(1.5); border:red 10px solid; opacity: 0.3;" >
    <rect/>
  </svg>
</div>

当您运行上面的代码段时，您可能需要在代码段窗口中向下滚动或点击完整页面才能看到结果。

When you run the code snippet above, you may have to scroll down in the snippet window or click on "Full page" to see the results.

这篇关于如何获得svgElement的规模？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！