SVG:用于嵌套 SVG 的 GetScreenCTM() 在 Firefox 中是不同的 [英] SVG: GetScreenCTM() for nested SVG is different in Firefox

问题描述

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

i have a web page with a svg which has another svg element in it. Thing is that i need to get matrix information via getScreenCTM() method (for nested svg) and firefox is returning different results than other browsers (IE, Chrome, Opera). Dont you know why is that?

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

Here i made a simple example: 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>

谢谢

推荐答案

viewBox 是一种应用于元素的子元素而不是元素本身的变换.

viewBox is a transform that applies to the children of an element and not the element itself.

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

If Firefox worked like the other buggy browsers then you'd find it hard to position the inner <svg> element within the root <svg> element because its getScreenCTM would be different to the getScreenCTM of a path or rect say.

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

What you're almost certainly looking for however is the CTM of some element that's within the inner <svg> element. You'll find that the values are cross-browser consistent in that case.

这篇关于SVG:用于嵌套 SVG 的 GetScreenCTM() 在 Firefox 中是不同的的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！