为什么这样的演示: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是此博客文章中演示的修改版本:http://meloncholy.com/blog/making-responsive-svg-graphs/
Mr.*_*ien 27
嵌套SVG元素可用于将SVG形状组合在一起,并将它们定位为集合.嵌套的SVG元素内的所有形状,将
positioned (x, y) relative to所述position (x, y)它的封闭svg元素的.通过移动封闭的svg元素的x和y坐标,您也可以移动所有嵌套的形状.下面是两个矩形嵌套在两个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>
mel*_*oly 19
你是对的(正如你在Alien先生的回答中所说)两个SVG元素具有相同的相对位置,实际上图形显示没有外部SVG.
我添加它的原因是因为JavaScript(我需要阻止标签被压扁)使用SVG元素的变换矩阵(由应用的viewBox属性引起)来缩放文本.
遗憾的是,返回的矩阵没有考虑应用于SVG元素本身的变换,因此我需要相对于使用初始坐标系的外部元素获取变换矩阵.希望有所帮助.
您可以定义一个新的viewport& viewbox。使用此选项，您可以使用 相对位置，例如 as css。有关更多信息，您可以查看此在线文章。
<!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>