CODEWITHSUNDEEP
vue.jssvgvuejs2nuxt.js
god830
god830

Reputation: 35

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

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:

enter image description here

This is what it looks like in Nuxt.js:

enter image description here

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>

Upvotes: 1

Views: 1020

Answers (1)

kissu
kissu

Reputation: 46612

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.

Upvotes: 3

Related Questions