The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums Other [Solved] SVG Gradients in svgdefs.svg Reply To: [Solved] SVG Gradients in svgdefs.svg


OK…a few things based on my limited understanding of SVG and use.

Each use can be affected by class / css only once…define a fill and it will apply to all elements inside the use.

So, for a multicolored, svg you have to use two defs/symbols and thus two use elements into a single SVG.

Now, the gradient. it appears and I haven’t worked on this yet that the gradient has to be defined inside the display combined SVG otherwise the use can’t act on it.

Still need to confirm if the gradient can be referenced as an outside use by first blush it seems not.

As I said, based on my limited understanding and playing around in Codepen.

What this also means is that each part of the display SVG is now independently hoverable…unless you chose to place the hover ‘event’ on the overall SVG.