动态svg xlink：href不在浏览器中渲染图标

Question

我在Vue单个文件组件中具有一个选项卡结构，其中使用use组件内的svg精灵和动态变量加载图标。

<svg class="w-4 h-4 fill-current text-blue-500 mb-2 mx-auto">
<use class="h-4 w-4" :xlink:href="`@/assets/ui-icons.svg#${tab.name}`"></use>
</svg>

结果在Chrome和Safari浏览器中显示为空白。即使DEV工具完全按照应有的方式显示编译后的代码，也不会呈现SVG。

Answer 1

假设您正在使用Webpack：

@/assets/ui-icons.svg是一个相对URI，大概是resolve-url-loader对其进行处理，以在转换您的网站时解析为SVG文件的真实URI。但是，resolve-url-loader仅在运行时运行，在这里，此URI位于Vue绑定（:xlink:href）内，该绑定在运行时已更改，因此resolve-url-loader无法修复它。尝试这样做：

<svg class="w-4 h-4 fill-current text-blue-500 mb-2 mx-auto">
  <use class="h-4 w-4" :xlink:href="require('@/assets/ui-icons.svg') + `#${tab.name}`"></use>
</svg>

require()调用将调用resolve-url-loader并解析为您的SVG文件，其余调用将链接到您要引用的SVG文件中的特定项目。如果您为SVG指定了其他加载程序，则需要覆盖它们，如下所示：

  

require('!resolve-url-loader!@/assets/ui-icons.svg')