时间戳

首页 > 解决方案 > 嵌套中的图像不显示在铬中

svg - 嵌套中的图像不显示在铬中

问题描述

我有一些 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添加一点来修改图像（检查器面板），它们都会显示出来，以便接缝与浏览器相关，因为结果在 FF 和 Inkscape 中有效。#qwertz

任何想法如何解决？

更新

这里可能有一些影响的一件事是被操纵的 SVG 是否已经插入到 dom 中。所以这段代码使图像出现：

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

}, 0)

但这感觉真的很老套，我对这里的“更清洁”解决方案真的很感兴趣……</p>

标签： svgchromium

解决方案

推荐阅读