SVG with path fill="url(xxx)" not working in Nuxt.js - vue.js

Question

The SVG (with animation) works perfect on .HTML file. But when I use it in Nuxt.js,
<path fill="url(#SVGID_82_)" ............. />
Everything tag that uses URL() for the fill attribute doesn't show up.
For example, the one with fill="#504D75" works fine, but the one with url(#SVGID_82_) is not visible.
This is how it should look like:
This is what it looks like in Nuxt.js:
This is part of the code:
<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,2.14,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,30.43c0,1.36,0.95,3.02,2.14,3.7l26.48,15.29
c1.18,0.68,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,1.88,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>

Answer 1

I stumbled upon this issue once. Not sure if your use case is similar but should be.
Here, you do have an #SVGID_82_, and you are maybe having another element with this id (looping somewhere maybe), but you only can have one id per page in HTML. Hence, some are appearing while the other are not. Nonetheless to say that inspecting thanks to devtools is the best option so far here (try finding the missing paths).
As for my experience and solution.
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>
I basically migrated my SVG into a .vue file and made it dynamic on the id part thanks to a prop. Then, I'm using it like this in my pages.
fancy-page.vue
<lazy-svg-unique-worklife-wording
unique-id="1"
></lazy-svg-unique-worklife-wording>
I do use native Nuxt lazy here and have a prefix of svg-unique for those specific component directory, on top of using nuxt-svg-loader.
Here is the config that I do use for those SVG in my nuxt.config.js components' section:
{
path: '~/assets/svg/unique_ids_needed',
prefix: 'svg-unique',
extensions: ['vue'],
},
That way, I do not have any collision when a unique ID is needed because I can basically loop on an array and display unique SVG urls thanks to v-for's index!
If my answer is not helping, I guess that we will need some reproduction on codesandbox to go further.