0

I started learn web dev some times ago and I came across an issue I've been on for months now.

Here's the thing, I got an svg path that's clipping my background div (which contain an img and an iframe). The shape is morphing every change of sections (5 sections, five time) using JS. But I want the shape to always be centered beacause on some screens depending on the dimensions, it doesn't render like it should.

1920x919 1440x900

The SVG :

<svg class="morph" viewBox="0 0 '+ viewportWidth +' '+ viewportHeight +'" height="'+ viewportHeight +'px" width="'+ viewportWidth +'px" preserveAspectRatio="xMidYMid meet" xml:space="peserve"><clipPath id="clipMorph"><path id="morphPath" d="M 262.9,252.2 C 210.1,338.2 212.6,487.6 288.8,553.9 372.2,626.5 511.2,517.8 620.3,536.3 750.6,558.4 860.3,723 987.3,686.5 1089,657.3 1168,534.7 1173,429.2 1178,313.7 1096,189.1 995.1,130.7 852.1,47.07 658.8,78.95 498.1,119.2 410.7,141.1 322.6,154.8 262.9,252.2 Z" /></clipPath></svg>

Background div CSS :

.background{
height:100vh;
width:100vw;
position:fixed;
z-index:0;
clip-path:url(#clipMorph);
-webkit-clip-path:url(#clipMorph);
background-image:url(../home_mobile.jpg);
background-size:cover}

I tried to :

.preserveAspectRatio but nothing append

.clipPathUnits seems to make shape and background div disappear

.getting the bounding box to manipulate the path with translate but the function always return no width or height for it

{ x: 959.5, y: 459.5, width: 0, height: 0, top: 459.5, right: 959.5, bottom: 459.5, left: 959.5 }
Somah
  • 1
  • 3
  • Try this answer and pay particular attention to the comments. https://stackoverflow.com/a/28312070/7172604 – Stuart Nichols Jun 19 '23 at 15:26
  • @StuartNichols Thanks for the reminder. I already stumble upon this post but I didn't really undertood the way relative path worked until now ! I used an app I found some times ago and with some playing around, I got it. – Somah Jun 22 '23 at 12:51

1 Answers1

0

Thanks to @StuartNichols for his comment. I'm gonna explain my process for thoses who would need the same result.

I used SvgPathEditor to draw my shapes in relative path using the grid (each shape being centered in a grid square).

<svg class="morph" viewBox="0 0 1 1" preserveAspectRatio="xMidYMid meet" xml:space="peserve"><clipPath id="clipMorph" clipPathUnits="objectBoundingBox"><path id="morphPath" d="M 262.9,252.2 C 210.1,338.2 212.6,487.6 288.8,553.9 372.2,626.5 511.2,517.8 620.3,536.3 750.6,558.4 860.3,723 987.3,686.5 1089,657.3 1168,534.7 1173,429.2 1178,313.7 1096,189.1 995.1,130.7 852.1,47.07 658.8,78.95 498.1,119.2 410.7,141.1 322.6,154.8 262.9,252.2 Z" /></clipPath></svg>

I kept the viewbox to "0 0 1 1" and rescaled the clipPath.

var viewportWidth = $(window).width();
    var viewportHeight = $(window).height();
    var svgClip = document.querySelector('#clipMorph');
    var clipScale = (viewportHeight/viewportWidth).toFixed(2);
    setAttributes(svgClip, {"transform": "scale("+ clipScale +",1)"});

Setting the viewbox to "0 0 1 1" meaning your 1x1 relative shape will be stretch (shape width and height will match viewport width and height). If the viewbox was set to "0 0 2 1", your shape width will be 1/2 of the viewbox width. Use your SVG container's ratio (in my case the viewport) to keep it scaled.

Then I used the following var to set the X translation of the path itself (not the clipPath !). Transformation is expressed in %.

var transX = ((1-svgScale)*100)

For mobile and pad version I needed the shape exceed the viewport width so I used

var transX = ((1-svgScale)*10)

The svgScale beeing over 1 the translate value will be negative. If it can helps more peoples to understand clip-path scaling and position. Thanks again to @StuartNichols.

Somah
  • 1
  • 3