Question

我无法超越2级。（尝试过Iceweasel和Chromium。）

作为测试，我尝试了this earlier reply中提供的代码变体。这个文件由3个单独的文件组成，a.svg包含b.svg，b.svg包含c.svg。（ NB： 这不是一个循环。）

<!-- 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中以绕过它。

SVG支持多少级别的递归？

1 个答案: