Javascript 如何获得一个变量的比例？

我正在研究svg

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

我的问题是，如何获得这个项目的规模

我尝试了

e.getCTM（）

和

e.getScreen（）

。矩阵不包含比例信息

---

请给我一些建议。

这是不可能的，或者更好地说，`真正的元素没有被转换。如果它继承了转换，它将被有效地缩放两次

您可能正在寻找

getComputedStyle

，但它会告诉您同样的情况。此处包含继承的属性以供参考：

var e=document.getElementById（“real”）；
console.log（window.getComputedStyle（e）[“transform”]）；
console.log（window.getComputedStyle（e）[“color]”）

显示如何使用
元素.getBoundingClientRect（）.width/element.offsetWidth
获取元素相对于文档的比例。但是，
svg
元素没有
offsetWidth
属性。因此，一种解决方案是在
svg
元素（例如
div
）前临时添加一个“offsetWidth-able”元素，读取此临时辅助对象上的比率，然后将其删除。如果插入的元素有可能通过CSS应用意外的缩放变换（如代码段所示），则插入的元素的样式应为
transform:scale（1）直接应用于它

更新：当包含缩放的CSS转换直接应用于
svg
元素本身时，会出现进一步的复杂情况。在这种情况下，需要对样式进行解析，可以使用
getComputedStyle
和
getPropertyValue
完成解析，并从返回的矩阵字符串中提取比例值。然后需要将其乘以前置
div
的相对比例

进一步更新：此解决方案目前似乎在Safari中不起作用，因为浏览器无法识别
insertAdjacentHTML
，尽管我可以找到的文档中说应该识别。（这是一个Safari bug还是我遗漏了什么？）


var e=document.getElementById（“real”）；
var computedTransform=window.getComputedStyle（e）.getPropertyValue（“transform”）；
if（computedTransform==“无”）{
eDirScale=1；
}否则{
var matrix=computedTransform.match（/matrix\（[^\）]*）\）/）[1]。拆分（/，*|+/）；
var scaleX=Math.sqrt（矩阵[0]*矩阵[0]+矩阵[1]*矩阵[1]）；
var scaleY=Math.sqrt（矩阵[2]*矩阵[2]+矩阵[3]*矩阵[3]）；
如果（scaleX！==scaleY）抛出“非均匀缩放”；
eDirScale=scaleX；
}
var relescale=e.getBoundingClientRect（）.width/e.offsetWidth；
e、 insertAdjacentHTML（'beforebeagin'，''；
var prepend=document.getElementById（“临时prepend”）；
var pRelScale=prepend.getBoundingClientRect（）.width/prepend.offsetWidth；
prepend.parentNode.removeChild（prepend）；
var刻度=预刻度*电子刻度；
编写（“直接在“svg”上缩放：”+eDirScale+“
”）；
文档。写（“相对于文档在“svg”上缩放：“+Esrescale+”，即在Firefox中不起作用，虽然它可能在Chrome（2016年2月）中起作用，但在不久的将来显然不会起作用
”；
文档。写（“相对于文档“+pRelScale+”
”）的前缀“div”上的比例；
文档。相对于文档：“+scale+”
”，在“svg”上写“总比例”
div{
变换：尺度（4）；
}

我建议将标题更新为“如何从父级继承转换样式？”，因为这并不是SVG特有的。但请参见下面我的回答，说明该问题是SVG特有的。谢谢您的回答。但Chrome将于2016年4月开始反对svgElement的offsetWidth。您可以在控制台中找到警告消息。所以我很抱歉这段代码在未来的Chrome中无法使用。事实上，@hjyssg，我正试图说明如何需要一个替代方案（我演示了），因为您是正确的，即
offsetWidth
不能像在HTML元素上一样依赖于
svgElement
。实际上，我已经在Firefox中测试了我的原始代码，但它已经不起作用了。我不知道它目前在Chrome上运行，但在不久的将来不会（谢谢你提供的信息）。因此，我更新了我的报告消息，以更好地显示浏览器的差异。无论如何，请再看看我的解决方案，看看（我认为）它是如何解决你的问题的。