Set svg background
twoi opened this issue · 4 comments
Is your feature request related to a problem? Please describe.
We are using bytefield-svg in wiki.js via kroki. That works great in light mode, but when in dark mode, it's impossible to see, as it is "black on black", due to the background of the svg (and the boxes) being transparent, and the foreground color being black.
Describe the solution you'd like
I would like to be able to set the background color of the whole svg to a color like white, so that it works both in light and dark mode.
Describe alternatives you've considered
Alternatively, I could set the background color of all boxes, but that does not seem to work for draw-gap and draw-bottom, and probably also not for the labels etc. In any way, it would be quite cumbersome and repetitive to have to do that for every element.
This is a good idea. I was thinking you might already be able to handle it by just setting the appropriate SVG attribute of the generated diagram yourself, but after some digging through the code to remind myself of how it worked and what I had implemented so far, I realized that I never set up a way to do that. So I think that is a better approach, providing a way for you to add whatever SVG attributes you’d like to the top-level SVG element by manipulating a map in the globals, rather than adding specific support to individual SVG attributes. Would you be interested in taking a crack at a pull request to do that, or would you rather wait for me to have time? (I am holding out hope that this weekend I will finally be able to get back to my open-source projects, after this crazy summer of buying a new home, moving, and selling the old home.)
I believe the release I just pushed to npm will let you do this, but I am having problems with the Continuous Integration environment on Netlify, so the updated documentation site will not build or publish, so I will have to tell you how to use the new feature here until I can find time to fix that (and I should have been asleep hours ago).
In the preamble to your diagram, you want to redefine the new svg-attrs predefined value, like so:
(def svg-attrs {:style "background-color:white"})
This new value can hold any standard SVG attributes to be added to the top-level SVG node. The above example sets the background color to white, rather than its standard transparent default.
Wow - thanks for addressing the issue this quick! Will check it out.
You’re welcome! I hope this achieves what you need. I should have mentioned that the new version is 1.6.0.
I was able to get the documentation build working this morning, although I don’t yet fully understand why. I need to talk to Netlify support to see if they can explain how they decide when to install Clojure in their build environment. But in any case, the bottom of the Predefined Values page now explains this new svg-attrs value.