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

Question

我在 Vue 单文件组件中有一个选项卡结构，其中使用 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 中显示为空白。 SVG 不会被渲染，即使 DEV 工具完全按照应有的方式显示编译后的代码。

Answer 1

假设您使用的是 Webpack：

@/assets/ui-icons.svg是一个相对 URI，大概是由resolve-url-loader处理，以在您的网站被转译时解析为 SVG 文件的真实 URI。 但是， resolve-url-loader仅在 transpile-time 运行，并且在 Vue 绑定 ( :xlink:href ) 中有此 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 文件，而 rest 将链接到您想要引用的 SVG 文件中的特定项目。 如果您为 SVG 指定了其他加载程序，那么您将需要覆盖它们，如下所示：

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