问题描述
为什么会有这样的演示: http://jsbin.com/ejorus/2/edit 一个<svg>元素嵌套在另一个<svg>元素内?
Why would a demo such as this: http://jsbin.com/ejorus/2/edit, have an <svg> element nested inside another <svg> element?
<svg class="graph">
<svg viewBox="0 0 1000 1000" preserveAspectRatio="none">
<g transform="translate(30,0)">
<!-- ... -->
</g>
</svg>
</svg>
JS Bin是此博客文章中演示的修改版本: http://meloncholy.com/blog/making-sensitive-svg-graphs/
The JS Bin is a modified version of the demo in this blog post: http://meloncholy.com/blog/making-responsive-svg-graphs/
推荐答案
您是对的(就像您在 Alien先生的回答中所说的那样) )，两个SVG元素都具有相同的相对位置，并且实际上，在没有外部SVG的情况下，该图形显示的很好.
You're right (as you say in Mr. Alien's answer) that both SVG elements have the same relative positions, and indeed the graph displays fine without the outer SVG.
我添加它的原因是因为JavaScript(我需要阻止标签被挤压)使用SVG元素的变换矩阵(由应用的viewBox属性引起)，以缩放文本.
The reason I added it is because the JavaScript (which I needed to stop the labels getting squished) uses the SVG element's transform matrix (caused by the applied viewBox attribute) to unscale the text.
不幸的是，返回的矩阵没有考虑到应用于SVG元素本身的变换，因此我需要获取相对于使用初始坐标系.希望能有所帮助.
Unfortunately the returned matrix doesn't take account of transformations applied to the SVG element itself, so I needed to get the transform matrix relative to an outer element that used the initial coordinate system instead. Hope that helps.
这篇关于为什么要嵌套< svg>另一个< svg>中的元素元素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！