svg - 为什么将元素嵌套在另一个元素内？

Question

为什么这样的演示:http://jsbin.com/ejorus/2/edit，将<svg>元素嵌套在另一个<svg>元素内？

<svg class="graph">
    <svg viewBox="0 0 1000 1000" preserveAspectRatio="none">
        <g transform="translate(30,0)">
            <!-- ... -->
        </g>
    </svg>
</svg>

JS Bin是此博客文章中 the demo的修改版本: http://meloncholy.com/blog/making-responsive-svg-graphs/

Answer 1

您是对的(就像您在Mr. Alien's answer中所说的那样)，两个SVG元素都具有相同的相对位置，并且实际上，在没有外部SVG的情况下，图形显示良好。

我添加它的原因是因为JavaScript(我需要阻止标签被挤压)使用SVG元素的transform matrix(由所应用的viewBox属性引起)来缩放文本。

不幸的是，返回的矩阵没有考虑到应用于SVG元素本身的转换，因此我需要获得相对于使用initial coordinate system的外部元素的转换矩阵。希望能有所帮助。