[Solved] SVG Gradients in svgdefs.svg

[Oliver]

Hello,

I would love to add some gradients for my symbols in my svgdefs.svg as well but I can’t get it to work.

How should I add them to the <defs> as all symbols are already in the <defs>?

Best,
Oliver

[Oliver]

@atelierbram Thank you for noting that.

Here is the sample:
http://codepen.io/anon/pen/ZYGGZq

The first path is an almost rectangular shaped background which should contain a gradient.

The svgdefs.svg is now included in the HTML but will be referenced from another place using <use>

[Paulie_D]

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.

http://codepen.io/Paulie-D/pen/JodYvX

[Oliver]

Thank you so much! I could even combine it in one symbol using

fill=currentColor on one path and using

fill: url(#dropbox);
color: white;

on one SVG symbol.

You helped me a lot!

[Author]

Posts