I have an SVG that uses linearGradient in its paths' fill properties. Works fine on desktop view but as I resize the window, the fill goes blank/is no longer linked to the gradient definition. Any idea why that would happen?
Using React and Next.js, tested on Chrome and Edge (unable to test on other browsers due to an unrelated bug involving the auth system on the project im working on)
Here's my SVG:
<svg
version="1.1"
id="menu"
className={this.hasActiveItem() ? "has-active-item" : ""}
xmlns="http://www.w3.org/2000/svg"
viewBox="-15 50 730 730"
>
<defs>
<linearGradient
xlinkHref="#a"
id="a"
x1={515.81}
x2={154.31}
y1={532.6}
y2={153.1}
gradientUnits="userSpaceOnUse"
>
<stop offset={0.22} stopColor="#0495b7" />
<stop offset={1} stopColor="#0071bb" />
</linearGradient>
<linearGradient
xlinkHref="#g"
id="g"
x1={98.15}
x2={570.5}
y1={251.62}
y2={432.54}
gradientUnits="userSpaceOnUse"
>
<stop offset={0} stopColor="#e5e5e5" stopOpacity={0.8} />
<stop offset={1} stopColor="gray" stopOpacity={0.7} />
</linearGradient>
<linearGradient
xlinkHref="#f"
id="f"
x1={321.48}
x2={85.23}
y1={263.58}
y2={156.33}
gradientTransform="rotate(-45 197.667 207.374)"
gradientUnits="userSpaceOnUse"
>
<stop offset={0} stopColor="#033" />
<stop offset={0.68} stopColor="#165d6d" />
</linearGradient>
<linearGradient
xlinkHref="#e"
id="e"
x1={47.74}
x2={278.53}
y1={399.86}
y2={518.11}
gradientTransform="rotate(-45 197.669 476.683)"
gradientUnits="userSpaceOnUse"
>
<stop offset={0} stopColor="#39b44a" />
<stop offset={0.85} stopColor="#006837" />
</linearGradient>
<linearGradient
id="d"
x1={305.39}
x2={558.14}
y1={419.36}
y2={507.11}
gradientTransform="rotate(-45 470.487 476.678)"
gradientUnits="userSpaceOnUse"
>
<stop offset={0} stopColor="#8bc53f" />
<stop offset={1} stopColor="#5b7710" />
</linearGradient>
<linearGradient
xlinkHref="#c"
id="c"
x1={596.55}
x2={324.3}
y1={255.05}
y2={150.8}
gradientTransform="rotate(-45 470.748 206.87)"
gradientUnits="userSpaceOnUse"
>
<stop offset={0} stopColor="#165d6d" />
<stop offset={0.73} stopColor="#12949b" />
</linearGradient>
<linearGradient
xlinkHref="#a"
id="b"
x1={197.3}
x2={472.23}
y1={342.52}
y2={342.52}
/>
<style>{".cls-2{fill:#fff}"}</style>
</defs>
<g
data-name="Layer 2"
style={{
isolation: "isolate",
}}
>
<g data-name="Layer 1">
<g id="evaluation-data">
<a
className={`item ${this.checkActive(menus[1].id)}`}
id="item-1"
role="link"
tabIndex="0"
xlinkTitle={`${menus[1].title}`}
transform="matrix(1,0,0,1,0,0)"
data-svg-origin="250 250"
onClick={this.handler.bind(
this,
menus[1].id,
`${menus[1].slug}`
)}
>
<circle
cx={334.32}
cy={342.08}
r={252.46}
style={{
fill: "url(#a)",
stroke: "url(#g)",
strokeWidth: ".75px",
strokeMiterlimit: 10,
}}
/>
<path
d="m335.74 251.96 8.82-154.33-2.21 154.57 19.81-153.31-13.23 154.01 30.69-151.5-24.18 152.68 41.42-148.93-35.01 150.56 51.94-145.59-45.66 147.68 62.2-141.51-56.09 144.05 72.14-136.72-66.22 139.68 81.7-131.22-76.01 134.59 90.86-125.05-85.43 128.83 99.55-118.26-94.39 122.41 107.73-110.86-102.89 115.37 115.36-102.89-110.85 107.73 122.41-94.39-118.26 99.54 128.83-85.42-125.06 90.86 134.6-76.02-131.22 81.71 139.68-66.22-136.72 72.13 144.05-56.08-141.52 62.2 147.68-45.67-145.59 51.95 150.56-35.02-148.92 41.43 152.67-24.19-151.5 30.7 154.01-13.23-153.3 19.81 154.56-2.21-154.32 8.82 154.32 8.82-154.56-2.21 153.3 19.81-154.01-13.23 151.5 30.7-152.67-24.19 148.92 41.43-150.56-35.02 145.59 51.95-147.68-45.67 141.52 62.2-144.05-56.09 136.72 72.14-139.68-66.22 131.22 81.71-134.6-76.02 125.06 90.86-128.83-85.42 118.26 99.54-122.41-94.39 110.85 107.73-115.36-102.89 102.89 115.37L396.44 414.7l94.39 122.41-99.55-118.26 85.43 128.83-90.86-125.05 76.01 134.59L380.16 426l66.22 139.68-72.14-136.72 56.09 144.05-62.2-141.51 45.66 147.68-51.94-145.59 35.01 150.56-41.42-148.93 24.18 152.68-30.69-151.5 13.23 154.01-19.81-153.31 2.21 154.57-8.82-154.33-8.83 154.33 2.21-154.57-19.81 153.31 13.23-154.01-30.69 151.5 24.18-152.68-41.42 148.93 35.01-150.56-51.94 145.59 45.66-147.68-62.19 141.51 56.08-144.05-72.13 136.72L291.31 426l-81.7 131.22 76.01-134.59-90.85 125.05 85.42-128.83-99.55 118.26 94.4-122.41-107.73 110.86 102.88-115.37-115.36 102.89 110.86-107.73-122.41 94.39 118.25-99.54-128.83 85.42 125.06-90.86-134.6 76.02 131.22-81.71-139.67 66.22 136.71-72.14-144.04 56.09 141.51-62.2-147.68 45.67 145.59-51.95-150.56 35.02 148.92-41.43-152.67 24.19 151.5-30.7-154.01 13.23 153.3-19.81-154.56 2.21 154.33-8.82-154.33-8.82 154.56 2.21-153.3-19.81 154.01 13.23-151.5-30.7 152.67 24.19-148.92-41.43 150.56 35.02-145.59-51.95 147.68 45.67-141.51-62.2 144.04 56.08-136.71-72.13 139.67 66.22-131.22-81.71 134.6 76.02-125.06-90.86 128.83 85.42-118.25-99.54 122.41 94.39-110.86-107.73 115.36 102.89-102.88-115.37L275.04 274.6l-94.4-122.41 99.55 118.26-85.42-128.83 90.85 125.05-76.01-134.59 81.7 131.22-66.21-139.68 72.13 136.72-56.08-144.05 62.19 141.51-45.66-147.68 51.94 145.59-35.01-150.56 41.42 148.93-24.18-152.68 30.69 151.5-13.23-154.01 19.81 153.31-2.21-154.57z"
style={{
fill: "#0495b7",
mixBlendMode: "screen",
opacity: 0.17,
}}
/>
<path
d="M297.84 122.65V106h5.78c5.04 0 8.12 3.98 8.12 8.33 0 5.09-3.22 8.33-8.48 8.33h-5.42zm5.33-2.23c3.85 0 6.14-2.25 6.14-6.05s-2.63-6.14-6.03-6.14h-3.02v12.2h2.9zM324.57 122.65v-1.94h-.04c-.88 1.49-2.45 2.25-4.23 2.25-3.65 0-6.62-2.75-6.62-6.35 0-3.98 2.86-6.77 6.53-6.77 1.82 0 3.35.67 4.32 2.09h.04v-1.76h2.34v12.47h-2.34Zm.04-6.21c0-2.43-1.76-4.46-4.34-4.46-2.34 0-4.25 2-4.25 4.46s1.91 4.39 4.25 4.39 4.34-2.03 4.34-4.39ZM330.28 122.65v-10.33h-1.69v-2.14h1.69v-4.19h2.34v4.19h2.05v2.14h-2.05v10.33h-2.34zM346.46 122.65v-1.94h-.04c-.88 1.49-2.45 2.25-4.23 2.25-3.65 0-6.62-2.75-6.62-6.35 0-3.98 2.86-6.77 6.53-6.77 1.82 0 3.35.67 4.32 2.09h.04v-1.76h2.34v12.47h-2.34Zm.04-6.21c0-2.43-1.76-4.46-4.34-4.46-2.34 0-4.25 2-4.25 4.46s1.91 4.39 4.25 4.39 4.34-2.03 4.34-4.39ZM367.59 120.04c-1.33 2-2.93 2.93-4.84 2.93-2.81 0-5.09-2.16-5.09-4.97 0-2.05 1.12-3.83 3.2-4.75-1.24-1.24-1.6-2.16-1.6-3.31 0-2.32 1.73-4.25 4.21-4.25 2.34 0 4.14 1.89 4.14 4.23 0 1.78-.97 3.13-2.79 4.01l2.21 2.16 1.82-3.67h2.63l-2.72 5.49 3.35 3.42-1.62 1.64-2.9-2.93Zm-5.13-5.15c-1.42.47-2.36 1.53-2.36 3.08s1.1 2.77 2.66 2.77c1.28 0 2.34-.7 3.22-2.39l-3.51-3.47Zm2.72-5.04c0-1.06-.74-1.94-1.73-1.94s-1.76.85-1.76 2.03c0 .79.45 1.49 1.42 2.36 1.6-.81 2.07-1.46 2.07-2.45ZM278.42 142.15V125.5h8.98v2.23h-6.55v4.91h6.55v2.23h-6.55v5.06h6.55v2.23h-8.98zM293.88 142.15l-4.95-12.47h2.5l3.26 8.91h.04l3.2-8.91h2.5l-4.91 12.47h-1.64zM311.99 142.15v-1.94h-.04c-.88 1.49-2.45 2.25-4.23 2.25-3.65 0-6.62-2.75-6.62-6.35 0-3.98 2.86-6.77 6.53-6.77 1.82 0 3.35.67 4.32 2.09h.04v-1.76h2.34v12.47h-2.34Zm.04-6.21c0-2.43-1.76-4.46-4.34-4.46-2.34 0-4.25 2-4.25 4.46s1.91 4.39 4.25 4.39 4.34-2.03 4.34-4.39ZM317.44 142.15V125.5h2.34v16.65h-2.34zM331.66 142.15v-1.35h-.04c-.61 1.06-2.03 1.67-3.67 1.67-2.68 0-5.2-1.44-5.2-5.83v-6.95h2.34v6.77c0 2.61.97 3.87 3.11 3.87s3.26-1.51 3.26-3.92v-6.73h2.34v12.47h-2.14ZM347.03 142.15v-1.94h-.04c-.88 1.49-2.45 2.25-4.23 2.25-3.65 0-6.62-2.75-6.62-6.35 0-3.98 2.86-6.77 6.53-6.77 1.82 0 3.35.67 4.32 2.09h.04v-1.76h2.34v12.47h-2.34Zm.05-6.21c0-2.43-1.76-4.46-4.34-4.46-2.34 0-4.25 2-4.25 4.46s1.91 4.39 4.25 4.39 4.34-2.03 4.34-4.39ZM352.74 142.15v-10.33h-1.69v-2.14h1.69v-4.19h2.34v4.19h2.05v2.14h-2.05v10.33h-2.34zM358.68 128.24v-2.75h2.34v2.75h-2.34zm0 13.91v-12.47h2.34v12.47h-2.34zM370 142.47c-3.51 0-6.64-2.99-6.64-6.5 0-3.8 2.99-6.62 6.82-6.62 3.44 0 6.68 2.7 6.64 6.66-.04 3.33-2.84 6.46-6.82 6.46Zm.07-10.98c-2.34 0-4.37 1.98-4.37 4.41s1.96 4.43 4.32 4.43 4.46-1.94 4.46-4.46-1.96-4.39-4.41-4.39ZM387.88 142.15v-6.8c0-2.63-1.04-3.87-3.11-3.87s-3.29 1.51-3.29 3.85v6.82h-2.34v-12.47h2.18v1.33h.04c.92-1.19 2.21-1.67 3.65-1.67 2.99 0 5.2 1.89 5.2 5.33v7.47h-2.34Z"
className="cls-2"
/>
</a>
</g>
</g>
<g id="student-recruitment">
<a
className={`item ${this.checkActive(menus[2].id)}`}
id="item-6"
role="link"
tabIndex="0"
xlinkTitle={`${menus[2].title}`}
onClick={this.handler.bind(
this,
menus[2].id,
`${menus[2].slug}`
)}
>
<rect
width={185.77}
height={185.77}
x={104.78}
y={114.49}
rx={39.46}
ry={39.46}
style={{
fill: "url(#f)",
strokeMiterlimit: 10,
stroke: "#fff",
strokeWidth: ".94px",
}}
transform="rotate(45 197.663 207.375)"
/>
<path
d="M152.3 202.27v-15.54h4.43c3.27 0 5.35 1.66 5.35 4.7s-2.04 4.7-5.33 4.7h-2.22v6.13h-2.22Zm4.43-8.21c1.96 0 3.13-.94 3.13-2.62s-1.21-2.62-3.15-2.62h-2.18v5.25h2.2ZM163.82 202.27v-11.63h2v1.05h.04c.51-.78 1.4-1.28 2.9-1.36v2.25c-1.85.06-2.8 1.22-2.8 3.17v6.53h-2.14ZM175.7 202.56c-3.21 0-6.07-2.79-6.07-6.07 0-3.55 2.74-6.17 6.24-6.17 3.15 0 6.11 2.52 6.07 6.21-.04 3.11-2.59 6.03-6.24 6.03Zm.06-10.25c-2.14 0-3.99 1.85-3.99 4.12s1.79 4.14 3.95 4.14 4.08-1.81 4.08-4.16-1.79-4.09-4.03-4.09ZM193.52 200.74c-.89 1.22-2.31 1.83-3.93 1.83-3.27 0-6.09-2.88-6.09-6.03 0-3.51 2.68-6.21 6.11-6.21 1.48 0 3.05.63 3.95 1.66v-1.34h2.14v10.1c0 3.78-2.29 6.11-6.15 6.11-2.61 0-4.67-1.41-5.64-3.67h2.39c.8 1.15 1.87 1.68 3.27 1.68 2.61 0 3.99-1.45 3.99-4.12h-.04Zm.04-4.28c0-2.73-2.04-4.14-4.01-4.14-2.12 0-3.91 1.87-3.91 4.14s1.81 4.12 3.93 4.12c2.49 0 3.99-2.23 3.99-4.12ZM198.42 202.27v-11.63h2v1.05h.04c.51-.78 1.4-1.28 2.9-1.36v2.25c-1.85.06-2.8 1.22-2.8 3.17v6.53h-2.14ZM214.18 202.27v-1.81h-.04c-.8 1.39-2.24 2.1-3.87 2.1-3.33 0-6.05-2.56-6.05-5.92 0-3.72 2.61-6.32 5.97-6.32 1.67 0 3.07.63 3.95 1.95h.04v-1.64h2.14v11.63h-2.14Zm.04-5.79c0-2.27-1.61-4.16-3.97-4.16-2.14 0-3.89 1.87-3.89 4.16s1.75 4.09 3.89 4.09 3.97-1.89 3.97-4.09ZM234.17 202.27v-6.51c0-2.2-.91-3.44-2.7-3.44-1.89 0-2.72 1.07-2.72 3.4v6.55h-2.14v-6.76c0-2.29-1.05-3.19-2.59-3.19-1.89 0-2.82 1.13-2.82 3.42v6.53h-2.14v-11.63h1.98v1.26h.04c.93-1.11 1.79-1.57 3.27-1.57s2.96.73 3.54 1.95c.82-1.32 1.96-1.95 3.77-1.95 2.96 0 4.65 1.89 4.65 4.89v7.05h-2.14ZM171.46 224.02v-15.54h8.21v2.08h-5.99v4.58h5.99v2.08h-5.99v4.72h5.99v2.08h-8.21zM190.14 224.02v-6.34c0-2.46-.95-3.61-2.84-3.61s-3 1.41-3 3.59v6.36h-2.14v-11.63h2v1.24h.04c.84-1.11 2.02-1.55 3.33-1.55 2.74 0 4.75 1.76 4.75 4.98v6.97h-2.14ZM195.25 224.02v-9.64h-1.54v-1.99h1.54v-3.91h2.14v3.91h1.87v1.99h-1.87v9.64h-2.14zM200.68 224.02v-11.63h2v1.05h.04c.51-.78 1.4-1.28 2.9-1.36v2.25c-1.85.06-2.8 1.22-2.8 3.17v6.53h-2.14ZM209.78 227.9l1.67-4.12-4.55-11.4h2.31l3.36 9.03 3.44-9.03h2.31l-6.3 15.52h-2.22z"
className="cls-2"
/>
</a>
</g>
[... the rest of the svg ...]
</svg>
Tried changing view sizes, blend modes, positions, etc. Tried attaching gradients in classes. Tried hacking a gradient via svg image pattern primitive (that also becomes unlinked on re-size)
When I use a regular color hex code in-line (like fill: "#FFF"), everything is fine. Only when I link to the definition, it breaks (like fill: url(#f))
As far as I know, there are no styles or classes that are attached to this svg anywhere other than within the svg itself.