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
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.right, ill try that
oh yeah, that's interesting xd
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
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
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.
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?
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-imageguess ill come back to this when it's the right time, basically, next month or 2 i guess xd
thank you
it took 10+ years but we did finally get browser folks to do something about masking....
Try playing with your preserveAspectRatio values
https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/preserveAspectRatio#syntax
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.
that one is set to none to stretch fully. the problem is %.
in my case % in grid span.
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
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
