Vega gradient on SVG doesn't work with dynamic url

[czhangsigmacomputing]

When using gradient color in vega with SVG renderer, vega will always add href() as base to gradient ref (related code is here).

This doesn't work for our application where we have click events on different elements and will update url href dynamically. The change of url will break the gradient ref.

For example, let's say my initial url is https://foo.com where I have a vega svg using gradient. The path in svg will be sth like <path fill="url(https://foo.com#gradient_0)">. Then if some click event update url be https://foo.com?bar=1, then the path url will be invalid and gradient cannot render correctly.

I have a codepen to reproduce this case: https://codepen.io/cheng_sigma/pen/rNEjLYO

Initial state:

If you click the Click here to change url button to change url, then resize window to trigger a Vega re-render, the gradient will disappear:

Here is a short video to show the case if it can be more clear:

https://github.com/user-attachments/assets/605deca3-641d-4bf8-aac5-927e60a092a5