SVG支持多少级递归？

Question

我无法通过前两个级别。（在Iceweasel和Chromium上尝试过。）

作为测试，我尝试了此前的回答中提供的代码变体。它由3个单独的文件组成，其中a.svg包括b.svg，而b.svg包括c.svg。（注意：这不是一个循环。）

<!-- a.svg -->
<svg width="100%" height="100%" viewBox="-100 -100 200 200" version="1.1"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
  <circle cx="-50" cy="-50" r="30" style="fill:#b58900" />
  <image x="10" y="20" width="80" height="80" xlink:href="b.svg" />
</svg>

<!-- b.svg -->
<svg width="100%" height="100%" viewBox="-100 -100 200 200" version="1.1"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
  <circle cx="-50" cy="-50" r="30" style="fill:#cb4b16" />
  <image x="10" y="20" width="80" height="80" xlink:href="c.svg" />
</svg>

<!-- c.svg -->
<svg width="100%" height="100%" viewBox="-100 -100 200 200" version="1.1"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
  <circle cx="-50" cy="-50" r="30" style="fill:#dc322f" />
</svg>

我期望看到一个大的深黄色圆点，一个中等大小的橙色圆点和一个小的红色圆点，但我只看到前两个。实际上，我看到的与如果b.svg没有包含c.svg时完全相同。

为什么c.svg没有被包含？

有没有办法使SVG递归在超过2层时工作？

- kjo

---

我已经将测试文件上传到a.svg, b.svg, c.svg，并添加了每个图像后面的彩色矩形（以显示它们应该在哪里）。您可以使用Chrome的开发人员工具来显示c.svg从未尝试加载。 - Phrogz

如果您发布您的用例，您可能会得到一些非常好的建议，以实现您所寻找的内容。例如，您可以在其他<svg>中放置<svg>并使用Javascript操作此DOM。 - Charlie Schliesser

Answer 1

在将SVG用作图像时，必须在单个文件中完整呈现。

• a.svg不是一个图像
• b.svg被a.svg包含为图像，因此受到单个文件完整显示的规则约束，因此它包含的任何图像必须作为数据URI包含。
• c.svg由于b.svg无法引用外部文件而被忽略。

将c.svg转换为数据URI并在b.svg中内联包含它以解决此问题。

- Robert Longson

---

这是非常好的了解。你的个人资料让我觉得你可能对此有所了解 :) - Charlie Schliesser