svg - SVG 支持多少级递归？

Question

我无法超过 2 个级别。 (在 Iceweasel 和 Chromium 上尝试过。)

作为测试，我尝试了 this earlier reply 中提供的代码的变体。 .这个由 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 个级别？

Answer 1

用作图像时的 SVG 必须在单个文件中完整。

a.svg 不是图像

b.svg 被 a.svg 作为图像包含在内，因此受制于完整的单个文件图像规则，因此它包含的任何图像必须作为 data URIs 包含在内。 .

c.svg 被忽略，因为 b.svg 不能引用外部文件。

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