| 05:34 | <Ondřej Žára> | I am having some difficulties applying CSS mask-size with SVG <mask> elements: https://codepen.io/ondrejzara/pen/pvgdZLB (size not being applied, both Firefox and Chrome). Any ideas what I am doing wrong? Or perhaps some better CSS-related channels where I can ask for help? |
| 06:13 | <Kaiido> | I suppose stackoverflow would be a proper venue for that kind of question. https://drafts.fxtf.org/css-masking/#masking states that mask-position and mask-size do apply for the case where mask-image doesn't point at a <mask>, though that doesn't seem very obvious...But to make a <mask> fit its masked element, you'd generally set its width and height in percentages, and its maskContentUnits to objectBoundingBox (also beware x and y have a default -10% value). |
| 06:38 | <Ondřej Žára> | Kaiido: thanks for the reply! I am not sure I 100% follow your suggestion. Does this mean that the <path> inside of a mask must only use percentage units? |
| 06:40 | <Ondřej Žára> | Yeah, apparently -- that is literally what objectBoundingBox requires. But that would not work when I have a lot of existing <path> elements that were designed for a particular viewBox setup (such as 24x24 icons). |
| 06:40 | <Ondřej Žára> | Does this mean that my already-defined 24x24 path cannot be used as a scalable <mask>? |
| 07:04 | <Kaiido> | You could use a <use> to reference a <symbol viewBox> that would contain your existing content: https://jsfiddle.net/n30e7xro/ but at this rate, it's probably just easier to not use a <mask> at all and reference a full svg image. |
| 07:32 | <Ondřej Žára> | I see, thanks. My initial goal was to store many masks in one file (to reduce the amount of http requests). But working with individual svg mask files seems to be a lot more flexible. |
| 07:32 | <Ondřej Žára> | Apparently, adding css-styleable icons exclusively via css is tricky :) |
| 08:10 | <Kaiido> | For this use case there is a hack that I first saw from Lea Verrou I think, which is to use the :target selector to show/hide different elements based on the current hash set for the SVG url: https://jsfiddle.net/dn14ghyf/ |
| 08:46 | <Ondřej Žára> | I see, nice! Is this :target-based styling inside <svg> universally supported? |
| 19:50 | <smaug> | Is referencetarget shipping already in some browser? |
| 19:59 | <Alan Stearns> | I’m only aware of https://groups.google.com/a/chromium.org/g/blink-dev/c/C3pELgMqzCY/m/DzCzBHPcAQAJ |
| 20:26 | <Luke Warlow (ooo till 20th)> | Is referencetarget shipping already in some browser? |
| 20:26 | <smaug> | right. I'm reviewing the implementation on Gecko side |
| 20:27 | <smaug> | and obviously the existing tests are lacking lots of cases |
| 20:27 | <smaug> | so I wonder how much it has gotten fuzz testing and such |
| 20:27 | <smaug> | in other implementations |