SVG Masks

[ninapaley]

As I design tarot card compositions ( #32 ) I would like to use svg masks.

Example: In addition to the background mask, which is simply a square (masking the clouds), the queen's cloak masks the background: The queen herself is layered over this:

@toolness how difficult will it be to add mask support? And once added, what would be the best way for me to spec masks? In the above example, there are 2 masks: the clouds background (square) and the cloak. I will also be adding more bounding boxes (see next issue) so color coding shapes can distinguish what's a mask and what's a bounding box...

To do

• [x] Atul needs to research SVG masks and figure out how hard this will actually be.
• [ ] Atul tells Nina how to specify masks in the symbol SVGs/metadata.
• [ ] Actually implement the masking!

[toolness]

Oh this will be fun! I believe SVG has some kind of support for masking but I've never used it, so I will tinker with it and that will give me a better idea of how best I can support your needs.

[toolness]

I just did some fiddling with masks yesterday in c83c678be17a97ef0dbdb8794be464dc5c15f0b9... there's now a "mask with circle" checkbox in the waves page, which constrains the waves to a circular mask. Seems pretty straightforward!

@ninapaley can you try it out on mobile and desktop Safari? I've verified that it works on Windows-based browsers but we should make sure it also works on iOS/OSX...

[ninapaley]

Beautiful on Chrome! Yay!!! @toolness

Update: I can't see anything on Safari, but my Mac OS is very old (10.11). I need to update it at least a few versions to use the new monitor I've ordered.

[ninapaley]

It works fine with Safari on my new iPhone!