动态svg xlink:href没有在浏览器中表示图标

Question

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

​

​

<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中为空白。SVG不会被呈现，即使DEV工具显示编译后的代码的方式是正确的。

​

​

Answer 1

假设你在利用Webpack：

@/assets/ui-icons.svg是一个相对的URI，可能是由resolve-url-loader处理的，以便在您的网站被转移时解析到SVG文件的真正URI。但是，resolve-url-loader只在transpile time运行，这里在Vue绑定(:xlink:href)中有这个URI，这个URI在运行时被更改，因此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')