SVG：嵌套 SVG 的 GetScreenCTM() 在 Firefox 中有所不同答案

【问题标题】：SVG: GetScreenCTM() for nested SVG is different in FirefoxSVG：嵌套 SVG 的 GetScreenCTM() 在 Firefox 中有所不同
【发布时间】：2016-05-24 23:53:06
【问题描述】：

我有一个带有 svg 的网页，其中包含另一个 svg 元素。问题是我需要通过 getScreenCTM() 方法（用于嵌套 svg）获取矩阵信息，并且 firefox 返回的结果与其他浏览器（IE、Chrome、Opera）不同。你不知道这是为什么吗？

这里我做了一个简单的例子：https://jsfiddle.net/6wz6nybv/6/

<svg id="svgwrapper"  xmlns="http://www.w3.org/2000/svg">
  <svg id="svgnested" width="1480mm" height="297mm" viewBox="0 0 149000 29700" xmlns="http://www.w3.org/2000/svg">
  </svg>
</svg>

谢谢

【问题讨论】：

因为其他浏览器都错了;-)

标签： javascript firefox svg

【解决方案1】：

viewBox 是一种适用于元素子元素而非元素本身的变换。

如果 Firefox 像其他有缺陷的浏览器一样工作，那么您会发现很难将内部 <svg> 元素定位在根 <svg> 元素中，因为它的 getScreenCTM 与路径或矩形的 getScreenCTM 不同。

但是，您几乎可以肯定要查找的是内部 <svg> 元素内的某些元素的 CTM。在这种情况下，您会发现这些值是跨浏览器一致的。

【讨论】：

实际上，我的内部 SVG 中没有任何内容，但我想根据其坐标添加内容...但由于那里没有任何内容，我无法让 CTM 进行放置.
然后添加一些内容，添加后进行调整。