sachac's Blog

sachac's Avatar Image
Interests include: #Emacs, #OrgMode, #elisp, #nodejs, #python, #sketchnotes, #parenting, #cooking, #gardening, #knitting, #sewing, #lego, #captioning, #plover #steno, and #stoic philosophy. Originally from Manila, now in Toronto. Married to a Vim guy (go figure) and raising a 7-year old (editor preference unknown), along with two very loud cats.

Blog: (mostly Emacs News these days), sketches: I also maintain and subed.el
← All posts

I wanted to use SVG elements to highlight sections of a map without having to reproduce the text and other parts of it, so I wanted it to darken only.

First I needed to set titles on the elements so that I could identify them. Couldn’t figure out good keyboard shortcuts in Inkscape, so I used Autohotkey to click on the title box in the Object Properties docker and then move the mouse back to the original position.

Support for mix-blend-mode on SVG elements is limited. I worked around that by using the image as the background on a div with fixed width, removing height and width on the SVG to make it responsive, and applying mix-blend-mode on my whole SVG.

Also, the platform I was doing this on didn’t like SVGs, so I base64-encoded the data, then fetched and decoded it. Hack upon hack upon hack, but it seems to be working.

To like or reply, open original post on