Question

我有一些SVG文件，其中一个文件通过使用<use />元素包含另一个文件。为了将所有这些文件合并为一个文件，我编写了一些代码，可以从下面转换./main.svg：

#file: ./svg/shared.svg
<svg>
  <image xlink:href="../img/bg.png" id="bg" />
</svg>

#file: ./svg/index.svg
<svg id="index">
  <use xlink:href="./shared.svg#bg" />
</svg>

#file: ./main.svg
<svg>
  <use xlink:href="./svg/index.svg#index" />
</svg>

进入：

<svg>
  <defs>
    <svg id="svg-index">
      <defs>
        <image xlink:href="./img/bg.png" id="img-bg" />
      </defs>
      <use xlink:href="#img-bg" />
    </svg>
  </defs>
  <use xlink:href="#svg-index" />
</svg>

因此，基本上所有url和ID都已解析，并且引用的节点也已导入。该脚本在Firefox中运行良好，结果在Inkscape中也运行良好。但是铬色的，无法显示图像。它们已加载，可以从“网络”选项卡中看到。

如果我通过在一个图像的末尾添加一点xlink:href来修改图像的#qwertz（检查器面板），则会显示所有图像，从而使接缝与浏览器相关，因为结果适用于FF和Inkscape。

任何想法如何解决该问题？

更新

在这里可能会起作用的一件事是，已操纵的SVG是否已插入dom。因此，此代码使图像出现：

setTimeout(function () {
  [...document.querySelectorAll('image')].forEach(
      img => img.setAttribute('xlink:href',
                img.getAttribute('xlink:href')
    )
  );

}, 0)

但这感觉真的很客气，我对这里的“清洁”解决方案非常感兴趣……

嵌套<defs>中的图像未显示在铬中

0 个答案: