为什么像这样的演示：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/
【问题讨论】：
标签： svg
嵌套 SVG 元素有助于将 SVG 形状组合在一起，并且 将它们定位为一个集合。嵌套在 svg 元素内的所有形状 将是
positioned (x, y) relative to的position (x, y)封闭 svg 元素。通过移动 x 和 y 坐标 封闭 svg 元素，你也可以移动所有嵌套的形状。这是一个示例，其中两个矩形嵌套在两个 svg 中 元素。除了颜色之外，这两个矩形具有相同的
x, y, height和width的定义。封闭的svg 元素具有不同的 x 值。由于x-position的 矩形相对于其封闭的 svg 元素进行解释x-position，两个矩形显示在不同位置 x 位置。- 雅各布·詹科夫
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<svg x="10">
<rect x="10" y="10" height="100" width="100"
style="stroke:#ff0000; fill: #0000ff"/>
</svg>
<svg x="200">
<rect x="10" y="10" height="100" width="100"
style="stroke:#009900; fill: #00cc00"/>
</svg>
</svg>
【讨论】：
svg 作为一个框架，这将使定位变得容易得多。
<g>？我认为它的主要用例正是您所描述的。顺便说一句，您认为<g> 和<svg> 的黑白分组元素有何不同？
你是对的（正如你在Mr. Alien's answer 中所说的那样）两个 SVG 元素具有相同的相对位置，并且确实在没有外部 SVG 的情况下图表显示良好。
我添加它的原因是因为 JavaScript（我需要阻止标签被压扁）使用 SVG 元素的 transform matrix（由应用的 viewBox 属性引起）来取消缩放文本。
不幸的是，返回的矩阵没有考虑应用于 SVG 元素本身的变换，因此我需要获取相对于使用 initial coordinate system 的外部元素的变换矩阵。希望有帮助。
【讨论】：
您可以定义一个新的viewport 和viewbox。使用此选项，您可以像使用 css 一样使用 relative positions。更多信息可以在线查看article。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Nested SVG</title>
<style>
html,
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
</style>
</head>
<body>
<svg width="100%" height="100%">
<rect x="25%" y="25%" width="50%" height="50%" style="fill: dodgerblue;" />
<svg x="25%" y="25%" width="50%" height="50%">
<rect x="25%" y="25%" width="50%" height="50%" style="fill: tomato;" />
</svg>
</svg>
</body>
</html>【讨论】：
我将出于完全不同的原因这样做：网站实施效率。
我有几个 SVG 文件，我在通过 AJAX 下载它们后将它们插入到我的网页中。我想将它们合并到一个文件中，因为这样更便于下载。我可以使用文本文件执行此操作，然后将 SVG 文本插入到网页元素的 innerHTML 属性中，但是 .svg 文件比 .txt 文件提供了两个额外的优势：
1) 标准的 .svgz 格式允许您将预压缩文件存储在 Web 服务器上，无需 mod_deflate。 SVG 文件的压缩效率很高，我看到 70-85% 的压缩率。
2) 网络浏览器在我的 javascript 代码之外解析 SVG，希望效率更高。要将 svg 元素插入 HTML，我使用父元素的 insertBefore 或 appendChild 方法而不是 innerHTML。
【讨论】：