STILL NOT SOLVED: Inline svg mask not resizing?

well ive been struggling with this for way too long now, https://codepen.io/thecubiq/pen/LYqwRLM do you mind helping me to fix the svg mask to be responsive? thanks i tried defining viewbox, i tried using symbol and use. nothing working..
16 Replies
dys 🐙
dys 🐙11mo ago
I don't know exactly how you want it to respond, but try removing the height and width, also viewBox is viewBox & not view-box. You'll need to define the dimensions in the containing HTML, where I assume you can get the responsivity you desire.
cubiq
cubiq11mo ago
right, ill try that
cubiq
cubiq11mo ago
oh yeah, that's interesting xd
cubiq
cubiq11mo ago
yay! the only thing im a bit scared of is the browser compatibility, gotta check it rn but other than that, it works so well :o
cubiq
cubiq11mo ago
follow-up to this, inline mask just doesn't wanna work properly on different browsers, in fact from what ive found out the only browser that supports this properly is ff (yet again), it does scale the width but cannot scale the height. Once again, it is just for an inline css, from external svg file it works but there i am limited with something else and i sadly require to have it as an inline svg. I'm out of ideas and i really want to work on it but this behavior limits me as of now, please, use the provided codepen and make it so that the height scales along with it the container. <3 thanks so much
No description
No description
No description
capt_uhu
capt_uhu11mo ago
links to inline masks was something that was called out for cross browser support for Interop2023. It looks like the work is just finally hitting or is about to hit stable chrome 120/121 https://chromestatus.com/roadmap. I'm guessing Safari support will be coming soon as well.
cubiq
cubiq11mo ago
so for now, am i basically forced to use file svg / define manually container size? thanks oh i see, so https://chromestatus.com/feature/5138520058626048 this would be it?
capt_uhu
capt_uhu11mo ago
yeah looks like it, seems that they did most of the unprefixing of -webkit-mask- stuff in 120 and dealt with the svg references in 121. You might wana look into -webkit-mask-box-image although that's got issues too (no firefox support). probably has the same issues with svg references though. https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-mask-box-image
cubiq
cubiq11mo ago
guess ill come back to this when it's the right time, basically, next month or 2 i guess xd thank you
capt_uhu
capt_uhu11mo ago
it took 10+ years but we did finally get browser folks to do something about masking....
clevermissfox
clevermissfox11mo ago
MDN Web Docs
preserveAspectRatio - SVG: Scalable Vector Graphics | MDN
The preserveAspectRatio attribute indicates how an element with a viewBox providing a given aspect ratio must fit into a viewport with a different aspect ratio.
cubiq
cubiq11mo ago
that one is set to none to stretch fully. the problem is %. in my case % in grid span.
cubiq
cubiq11mo ago
cubiq
cubiq11mo ago
https://www.w3.org/TR/2001/PR-SVG-20010719/masking.html#ExampleMask01 https://codepen.io/Cubiq/pen/QWoLGNM the problem seems to be overcomplicating the thing, for example referencing the mask contents using the <use> but the main bug was most likely because i was not using maskContentUnits="objectBoundingBox" properly. feels like this demo ive created could fix the problem as it works properly both on chromium (edge dev) and ff. i gotta still try it on safari but this could actually work xd
cubiq
cubiq11mo ago
cubiq
cubiq11mo ago
amazing, the mask is working perfectly, there's tiny performance bug on firefox regarding the render when resizing the window but i guess it's fine xd
No description
Want results from more Discord servers?
Add your server