Page 1 of 1

SVG definition over-riding

Posted: Thu Sep 13, 2018 10:40 am UTC
by Soupspoon
Not really coding, as I'm currently trying to avoid that, but my Google Fu isn't helping me out much on this and keeps on tripping over unrelated problems with similar component words, and if it's specifically in the W3Schools documentation/etc then I've overlooked it.

I have a handcrafted <SVG> within which I've used a <DEFS> section to define a <G>roup of elements of a given id="foo" that I later <use xlink:href="#foo"… /> multiple times. Because it's neater and it works best like that, IMO.

But I'd like to pass down alternate stylings to some iterations of the Use. If I specify fill= or stroke= at the Use level and don't specify a default in the Defs Group item(s) then they inherit anything I tell them to, but I'd like to specify base qualities for the Defs Group items but then if I need it to override at the Use level, specifically at the component-of-the-group level. And do this statically (at the moment, at least¹) rather than poking and prodding via CSS (external, or internal to the .HTM within which it may or may not be an object) or delving in with .js alterations (if that even works in this case).

To this end I've tried setting sub-Ids or sub-Classes within the defining group and passing style="path.class{fill:red;}" sort of constructs (as required) in all the variations that I know overriding styles should work (and various ways that they probably don't, on the off-chance).

I've a feeling I might be better off with overlaying the 'base' items, in the limited places where these are no longer base, with additional uniquely defined items of the non-base nature. But it loses some of the brevity of which I seek. (In fact, make it three layers, to help with transparency/opacity issues, the 'special' one betwixt the unfilled upper and its equivalent filled lower. That only doubles the pre-unique markup.)

If the answer isn't obvious (or obviously "can't be done!") I'm probably moving onto something else that actually needs to be done, rather than this displacement activity. So no rush if not immediately answerable.

¹ It's possible that in the future I will dynamically (and externally) script the (re)creation of the grouped set as separately id-able elements groups that I can dynamically flip qualities of, but even that lacks the elegance of economy I believe I should be able to achieve.

Re: SVG definition over-riding

Posted: Thu Sep 13, 2018 3:06 pm UTC
by Xanthir
Can't be done without CSS. Can be done quite easily with, and you can just write it inline:

Code: Select all

<!DOCTYPE html>
 <defs><rect id=foo width=100 height=100 fill="var(--color, red)" /></defs>
 <use href="#foo" style="--color: green"/>

Re: SVG definition over-riding

Posted: Thu Sep 13, 2018 3:24 pm UTC
by Soupspoon
Ah, that's a form I've never actually used before. (I don't mind it being .CSS, just relying on it coming in from outside the SVG.)

And it works with style="--A: red; --B: orange; --C: yellow; …" multiples I note, keyed to each subelement, so long as I Var up each relevant element with --A, --B, --C etc¹. Which I've replaced over the prior component entity classes I tried. Not quite as neat, but it seems it might even help with another problem I may encounter further down the trail.

Cheers for that!

Edit: One little test to add. It works as an SVG object on a browser, but will GIMP open and convert it? No, it doesn't (at least not my version), and I wasn't totally expecting it to go that far, nor requiring it. It skips completely over the var() bit without parsing/substituting either supplied or defaulting values. No matter. For any future rasterising directly through GIMP I've got enough tools to make the re-do easy, or just screengrab the browser-window with it in and crop it.

¹ Or something more descriptive, naturally. ;)

Re: SVG definition over-riding

Posted: Sat Sep 15, 2018 9:07 am UTC
by Soupspoon
Just adding a double-post to my own thread for three reasons:

1) To thank Xanthir again, that other stumbling block has been leapt over,

2) To point out this page, which it still took a godawful amount of Google-Fu to find with my updated idea of (workable) keywords in the search box (and was well down the page, beyond many currently irrelevant, if otherwise interesting, other-problem solutions) but may answer and add to other people's questions if they seek answers like this using my terminology and have as little luck as I did except to stumble in here,

3) For the meta-purpose of being an attempt to get this thread to show on my Your Posts list (and thus Unread Posts, if anyone answers), noting that the forum is still not reliably doing this for me (I happened to see Xanthir's reply when looking at the Coding subforum again, within minutes of that posting, but might not have spotted it yet if I'd just waited for the usual appearance of "a thread you're involved in with unread stuff". So with other good reasons to give it a poke I thought I might do so. See if it appears under the appropriate Quick Links sets. (How goes it for you, Xanth? How did/will/did you spot this new message? Answers on a postcard, maybe... ;)

Re: SVG definition over-riding

Posted: Sun Sep 16, 2018 5:38 pm UTC
by Xanthir
Yo, it goes great for me, and I don't rely on the board to tell me anything, I just check the ~10 boards I actually read roughly daily. ^_^

Re: SVG definition over-riding

Posted: Sun Sep 16, 2018 9:32 pm UTC
by Soupspoon
Xanthir wrote:Yo, it goes great for me, and I don't rely on the board to tell me anything, I just check the ~10 boards I actually read roughly daily. ^_^

And, though my last post hadn't brought the thread into my 'visibility', now it is there. Either forum got a dataprod by an ubermod, or it just randomly updated itself full for Reasons Unknown. But that's a different Coding issue to that of my SVG question, and I didn't mean for this to be such a prominent part of this thread, just mentioning in passing.

I've snipped out the (already Spoiler-tagged, before I respoilered this bit) details of the Forum Glitch that I wrote. Maybe I'll paste the text back into a Site Issues message. Maybe not. Haven't decided yet, and I've mentioned this before anyway (there'll be a thread for it, maybe worth necroing?) and already sort of deal with it. While you avoid the glitch entirely.

(Note that I'm hoping that if there's any more to go in this thread, it'll be the SVG stuff, to add to that knowledge. No more from me on the other thing, anyway.)