How to add a style to a <g> within an existing <svg>

Question

I have 3 identical SVGs displaying on my page. But they are placed dynamically (I'm using WordPress, with a plugin that inlines all SVG images). I'm using them to show percentages of different categories by adding a linear gradient. But each image needs to have a different linear gradient definition and fill url.
So what I'm trying to figure out is whether I can use svg.js to just insert those defs & styles on the fly, based on the unique div id that each svg is inside of, or whether I need to use it to generate the entire SVGs themselves (I would rather not do this, since I need to make a lot of this easily changeable on the fly, through the administrative backend of the site).