Hi,
I’m a newbie in SVG so it’s probably an easy question. I’m trying to make an SVG Mask with a simple triangle shape inside a rectangle. What I want to achieve is to get the rectangle responsive with his width but the triangle should
– get a fixed size
– be always at the center of the viewport
You’ll understand better with my codepen: https://codepen.io/Oreonax/pen/jVogyZ
It’s workning right now in chrome, but the translateX (or translate) is not working in firefox and edge. I’ve tried to use the transform SVG attribute but it seems that I can’t use percentages values.
I’m not realy familiar with the viewbox but I’m not sure it will help in this case.
Thanks anyway for any kind of help !