2

Is it possible to use SVG Defs outside of the SVG Tag. Something like this:

<defs>
    // defs code goes here
</defs>

<svg>
// svg code goes here
</svg>

If so -- how can I associate the defs tag with the particular svg tag that I want to target?

Moshe
  • 6,011
  • 16
  • 60
  • 112
  • Basically...no. I'm not clear on what it is you are trying to achieve. - https://developer.mozilla.org/en-US/docs/Web/SVG/Element/defs – Paulie_D Jul 04 '19 at 15:46
  • I am using react-icons -- it creates svg icons. I would like to use linearGradients with those icons -- but the code that is output lacks a `defs` tag. So I was thinking/hoping that I could create my own tag and associate it with the svg code that is output. – Moshe Jul 04 '19 at 15:50
  • The link I provided shows how this is implemented. – Paulie_D Jul 04 '19 at 15:51
  • You can add svg defs in a different svg element. This svg element may be very small and with `position:absolute`, so that it doesn't affect the layout – enxaneta Jul 04 '19 at 15:51
  • @Paulie_D As far as I can tell -- that link shows what you originally said -- that it CANNOT be done. Is that correct? – Moshe Jul 04 '19 at 15:56
  • @enxaneta How can I add a defs in a DIFFERENT svg element and use it to color THE OTHER svg element? – Moshe Jul 04 '19 at 15:57
  • Please take a look at this answer where the patterns are in a different svg element https://stackoverflow.com/questions/49531434/hidding-svg-affects-other-svg-styles-in-the-same-page/56791893#56791893 – enxaneta Jul 04 '19 at 16:00
  • 2
    No...once defined in the initial SVG the defs can be used by any other SVG. - https://codepen.io/Paulie-D/pen/WqKZLb – Paulie_D Jul 04 '19 at 16:02
  • @Paulie_D But I do need to add `` within the `svg` tag -- is that correct? – Moshe Jul 04 '19 at 16:09
  • @Moshe Nope = https://codepen.io/Paulie-D/pen/WqKZLb – Paulie_D Jul 04 '19 at 16:14
  • @Paulie_D Got it -- thanks. I'm going to try it out now. – Moshe Jul 04 '19 at 16:16

1 Answers1

2

YES

At least outside THAT svg element, which, i think, is what you're going after?!

IT ONLY NEEDS TO BE INSIDE any SVG TAGS

but those don't have to be more than <svg style="display:none;"><defs>...</defs></svg>

(It doesn't matter if it's defined afterwards or before and can even be written outside the body (although i'm not sure that'd be valid html).)

LuckyLuke Skywalker
  • 610
  • 2
  • 5
  • 17