32

为什么像这样的演示：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/

4

4 回答 4

34

嵌套 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>

学分

于 2013-06-03T05:10:14.933 回答
22

您是对的（正如您在Alien 先生的回答中所说），两个 SVG 元素具有相同的相对位置，并且确实没有外部 SVG，图形显示良好。

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

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

于 2013-06-03T10:51:36.257 回答
5

You can define a new viewport & viewbox. With this option, you can use relative positions like as css. For more information, you can see this online 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>

于 2017-10-12T13:25:44.990 回答
0

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

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

1) 标准的 .svgz 格式允许您将预压缩文件存储在 Web 服务器上，无需mod_deflate. SVG 文件的压缩效率很高，我看到 70-85% 的压缩率。

2）网络浏览器在我的javascript代码之外解析SVG，希望更有效。要将 svg 元素插入 HTML，我使用父元素的insertBeforeorappendChild方法而不是innerHTML.

于 2019-05-28T14:42:07.850 回答