SVG支持多少级别的递归？

Question

我不能超过2级.(尝试过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个级别？

Answer 1

用作图像的SVG必须在单个文件中完成.

• a.svg不是图像
• b.svg由a.svg作为图像包含在内,因此在单个文件图像规则中受到完整的限制,因此它包含的任何图像都必须作为数据URI包含在内.
• c.svg被忽略,因为b.svg不能引用外部文件.

将c.svg转换为数据URI并将其包含在b.svg内联中以绕过它.