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

嵌套SVG元素可用于将SVG形状组合在一起，以及   将它们定位为集合。所有形状都嵌套在svg元素中   将positioned (x, y) relative to position (x, y)。x, y, height   包含svg元素。通过移动的x和y坐标   包含svg元素，你也可以移动所有嵌套的形状。

这是一个例子，其中两个矩形嵌套在两个svg中   元素。除了颜色，两个矩形具有相同的颜色   width和x-position的定义。封闭的svg   元素具有不同的x值。自x-position以来   矩形相对于其封闭的svg元素进行解释   <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>，两个矩形显示在不同的位置   X位置。

- 雅各布·詹科夫

{{1}}

Credits

Answer 2

你是对的（正如你在Mr. Alien's answer中所说的）两个SVG元素具有相同的相对位置，实际上图形显示没有外部SVG。

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

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

Answer 3

您可以定义新的viewport＆amp; viewbox。使用此选项，您可以像css一样使用relative positions。有关详细信息，您可以在线查看article。

＆＃13;

<!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>

＆＃13;

Answer 4

我要这样做的原因完全不同：网站实施效率。

在通过AJAX下载它们之后，我将几个SVG文件插入到网页中。我想将它们合并到一个文件中，因为这样比较适合下载。我可以使用文本文件执行此操作，然后将SVG文本插入网页元素的innerHTML属性中，但是.svg文件比.txt文件有两个额外的优点：

1）标准.svgz格式允许您将预压缩的文件存储在Web服务器上，而不需要mod_deflate。 SVG文件非常高效地压缩，我看到70-85％的压缩率。

2）网络浏览器在我的JavaScript代码之外解析了SVG，希望可以更有效地进行解析。要将svg元素插入HTML，我使用父元素的insertBefore或appendChild方法而不是innerHTML。

为什么将<svg>元素嵌套在另一个<svg>元素中？</svg> </svg>

4 个答案: