带有路径 fill="url(xxx)" 的 SVG 在 Nuxt.js 中不起作用

大佬教程收集整理的这篇文章主要介绍了带有路径 fill="url(xxx)" 的 SVG 在 Nuxt.js 中不起作用，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

如何解决带有路径 fill="url(xxX)" 的 SVG 在 Nuxt.js 中不起作用？

开发过程中遇到带有路径 fill="url(xxX)" 的 SVG 在 Nuxt.js 中不起作用的问题如何解决？下面主要结合日常开发的经验，给出你关于带有路径 fill="url(xxX)" 的 SVG 在 Nuxt.js 中不起作用的解决方法建议，希望对你解决带有路径 fill="url(xxX)" 的 SVG 在 Nuxt.js 中不起作用有所启发或帮助；

SVG（带动画）非常适合 .HTML 文件。但是当我在 Nuxt.Js 中使用它时，

<path fill="url(#SVGID_82_)" ............. />

使用 URL() 作为填充属性的所有标签都不会显示。 例如，带有 fill="#504D75" 的工作正常，但带有 url(#SVGID_82_) 的则不可见。

它应该是这样的：

@H_197_15@

这是在 Nuxt.Js 中的样子：

这是代码的一部分：

<g>
  <linearGradIEnt
    ID="SVGID_82_"
    gradIEntUnits="userSpaceOnUse"
    x1="5022.084"
    y1="484.3875"
    x2="5051.5962"
    y2="535.5038"
    gradIEnttransform="matrix(-1 0 0 -1 5733.2881 656)"
  >
    <stop offset="0.2119" style="stop-color: #282447" />
    <stop offset="0.2376" style="stop-color: #3f3b5f" />
    <stop offset="0.2759" style="stop-color: #646085" />
    <stop offset="0.2969" style="stop-color: #747195" />
  </linearGradIEnt>
  <path
    fill="url(#SVGID_82_)"
    d="M695.75,129.58c0.73-0.4,1.81-0.48,2.7,0.14l25.91,14.94c1.18,0.68,2.14,2.34,3.7
      l-0.09,30.43c0,0.68-0.24,1.15-0.63,1.37l-29.15,16.94c0.38-0.22,0.62-0.7,0.63-1.37l-0.3-30.46c0-1.36-0.81-2.61-2-3.29
      l-26.24-15.67c-0.6-0.34-1.14-0.38-1.52-0.15L695.75,129.58z"
  />
  <path
    fill="#504D75"
    d="M668.72,146.31c-1.18-0.68-2.15-0.13-2.15,1.23l-0.09,1.36,0.95,3.02,3.7l26.48,15.29
      c1.18,2.15,0.13,2.15-1.23l0.09-30.43c0-1.36-0.95-3.02-2.14-3.7L668.72,146.31z"
  />
  <g>
    <path
      fill="#282447"
      d="M692.58,192.59l-21.68-12.52c-1.06-0.61-1.88-2.04-1.88-3.26l0.07-24.91c0-0.63,0.23-1.11,0.65-1.35
          c0.42-0.24,0.95-0.2,1.51,0.12l-0.13,0.23l0.13-0.23l21.68,12.52c1.06,0.61,1.88,2.04,3.26l-0.07,24.91
          c0,0.63-0.23,1.11-0.65,1.35c-0.18,0.1-0.38,0.15-0.59,0.15C693.21,192.87,692.9,192.77,692.58,192.59z M670.98,151.13
          c-0.39-0.22-0.74-0.27-0.99-0.12c-0.25,0.14-0.38,0.46-0.38,0.9l-0.07,24.91c0,1.03,0.72,2.29,1.62,2.8l21.68,12.52
          c0.39,0.22,0.74,0.27,0.98,0.12c0.25-0.14,0.38-0.46,0.38-0.9l0.07-24.91c0-1.03-0.72-2.29-1.62-2.8L670.98,151.13
          L670.98,151.13z"
    />
  </g>
</g>

解决方法

@H_696_36@

我曾经偶然发现过这个问题。不确定您的用例是否相似但应该相似。

在这里，您确实有一个 #SVGID_82_，并且您可能有另一个具有此 ID 的元素（可能在某处循环），但在 HTML 中每个页面只能有一个 ID。因此，有些出现，而另一些则没有。尽管如此，到目前为止，使用 devtools 进行检查是最好的选择（尝试找到缺失的路径）。

---

至于我的经验和解决方案。

worklife_wording.vue

<template>
  <svg fill="none" viewBox="0 0 161 24">
    <defs />
    <path
      fill="#32BFA3"
      d="m.197 6.353a3.714 3.714 0 017.036-2.38l5.154 15.242a3.714 3.714 0 11-7.037 2.38l.197 6.352z"
    />
    <path
      fill="#FA9856"
      fill-rule="evenodd"
      d="M23.814 1.437a3.708 3.708 0 00-4.701 2.322l-1.328 3.919 3.867 11.434.044.14 4.441-13.113a3.708 3.708 0 00-2.323-4.702z"
      clip-rule="evenodd"
    />
    <path
      :fill="`url(#prefix__prefix__paint${uniquEID}_linear)`" <------ here !
      d="M8.724 6.145a3.714 3.714 0 117.037-2.38l5.153 15.242a3.714 3.714 0 11-7.036 2.379L8.724 6.145z"
    />
    <path
      fill="#144862"
      d="M62....."
    />
    <defs>
      <linearGradient
        :id="`prefix__prefix__paint${uniquEID}_linear`" <------- and here !
        x1="7.584"
        x2="22.122"
        y1=".247"
        y2="24.897"
        gradientUnits="userSpaceOnUse"
      >
        <stop stop-color="#144862" />
        <stop offset="1" stop-color="#3B7694" />
      </linearGradient>
    </defs>
  </svg>
</template>

<script>
export default {
  name: 'SvgWorklifeWording',props: {
    uniquEID: {
      type: String,default: '0',},}
</script>

我基本上将我的 SVG 迁移到一个 .vue 文件中，并通过 prop 在 id 部分使其动态化。然后，我在我的页面中像这样使用它。

fancy-page.vue

<lazy-svg-unique-worklife-wording
  unique-id="1"
></lazy-svg-unique-worklife-wording>

我确实在这里使用了原生 Nuxt lazy，并且在使用 nuxt-svg-loader 的基础上，为那些特定的组件目录添加了前缀 svg-unique。

这是我在 nuxt.config.js 组件部分中用于那些 SVG 的配置：

{
  path: '~/assets/svg/unique_ids_needed',prefix: 'svg-unique',extensions: ['vue'],

这样，当需要唯一 ID 时我不会发生任何冲突，因为我基本上可以在数组上循环并显示唯一的 SVG 网址，这要归功于 v-for 的索引！

---

如果我的回答没有帮助，我想我们需要在 codeandbox 上进行一些复制才能走得更远。