Question

我有以下svg：

<svg id="setup" width="428" height="428" viewBox="0 0 428 428">

    <!-- matrix A-->
    <g transform="matrix(5, 0, 0, 8, 10, 15)">
        <svg width="300" height="300">

            <!-- matrix B-->
            <g transform="matrix(1, 0, 0, 1, 2, 2)">

                <!-- matrix C-->
                <rect transform="matrix(2, 0, 0, 2, 3, 3)" x="10" y="10" width="10" height="10" style="fill:#00ff00;stroke-width:0;" />
            </g>
        </svg>
    </g>
</svg>

第一个中有一个嵌套的svg，内部svg由它所包含的组转换。在这一个中是另一个组，包含rect，也应用了一些转换。

我正在寻找一种获得绝对的方法，它应该是ABC的产物（参考上面的评论）。

我尝试了这些变体（r是对上面<rect … />的引用）：

#1: r.getTransformToElement(r.farthestViewportElement);

result:

| 2 0 5 |
| 0 2 5 |
| 0 0 1 |

what is B times C

#2: r.getTransformToElement(r.nearestViewportElement);

result:

| 0.4  0.00 -1.00 |
| 0.0  0.25 -1.25 |
| 0.0  0.00  1.00 |

what is that?

#3: r.getScreenCTM();

result:

| 10  0 531.5 |
|  0 16 187.5 |
|  0  0   1.0 |

what actually seems to be the transformation of the svg on the overall page times ABC.

那么获取ABC的方式是什么？

提前致谢！

修改

我找到了获得该矩阵的方法，但我希望有更好的方法来做到这一点，我很好奇！

所以这是代码：

var svg = document.getElementById('setup'),
    ABC = svg.getScreenCTM().inverse().multiply(r.getScreenCTM());

修改＃2

我必须承认，变体＃1在Firefox中运行良好，但在Chromium中运行不正确。

SVG-get绝对变换为元素

0 个答案: