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 中以解决此问题。