大佬教程收集整理的这篇文章主要介绍了带有路径 fill="url(xxx)" 的 SVG 在 Nuxt.js 中不起作用，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
SVG（带动画）非常适合 .HTML 文件。但是当我在 Nuxt.Js 中使用它时，
<path fill="url(#SVGID_82_)" ............. />
使用 URL() 作为填充属性的所有标签都不会显示。 例如，带有 fill="#504D75" 的工作正常，但带有 url(#SVGID_82_) 的则不可见。
它应该是这样的：
这是在 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>
我曾经偶然发现过这个问题。不确定您的用例是否相似但应该相似。
在这里，您确实有一个 #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 上进行一些复制才能走得更远。
以上是大佬教程为你收集整理的带有路径 fill="url(xxx)" 的 SVG 在 Nuxt.js 中不起作用全部内容，希望文章能够帮你解决带有路径 fill="url(xxx)" 的 SVG 在 Nuxt.js 中不起作用所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。