Adding a pathway to a clip path: a step-by-step guide

While attempting to create a wave effect on an image, I hit a roadblock. There are two SVGs involved - one with the path I want to use and the other behaving as expected but with the wrong clip path/shape. However, when I try to insert the desired path, it doesn't seem to work. What am I missing here and how can I resolve this issue?

Path I Want to Use

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1441 742" fill="none">        
    <path  d="M0 740.5V0H1440.5V557C1369 549 1193.8 549.4 1073 615C922 
    697 809 702.5 698.5 685C611.987 671.299 465 603 286 677C142.8 736.2 35.6667 744 0 740.5Z" 
    fill="#001E61"/>
</svg>

Example That Works But Has Wrong Path

img {
    clip-path: url(#svgClip);
    width: 100%;
    height: 800px;
    object-fit: cover;
    display: block;
    margin-right: auto;
    margin-left: auto;
}

<img src="https://stage.popsacademy.se/wp-content/uploads/2020/10/popsacademybild2-1920x1080px-1920x1080.jpg" />

<svg width="0" height="0">
    <clipPath id="svgClip" clipPathUnits="objectBoundingBox">
        <path d="M0.75815095,0.0579477769 C0.879893708, 
          
        0.187288937 0.902165272,0 1,0.785996249 
          
        C0.627963035,0.966765889 0.26163708,0.71434951 
          
        0.111342491,0.755791573 C-0.0332137967,
          
        0.603287436 -0.035795248, 0.382887577 0.0965066612,
          
        0.173955315 C0.200239457,0.0101396315 0.648923894,
          
        -0.0580965318 0.75815095,0.0579477769 Z">
    
  </clipPath>
</svg>
cssimagesvg

Answer №1

After looking at the working example, it is clear that the path used to clip the image has a bounding box with a width of 1 and a height less than 1. To fit your desired path, you'll need to scale it down.

The bounding box of the intended path is width:1441 height:742. I am scaling the path by a factor of 0.00069 since 1 / 1441 = 0.00069

*{margin:0;padding:0;}
img{width:100%;-webkit-clip-path: url(#clip); clip-path: url(#clip);}
<img src="https://stage.popsacademy.se/wp-content/uploads/2020/10/popsacademybild2-1920x1080px-1920x1080.jpg"  />
<br>
<svg class="chart" width="0" viewBox="0 0 1 0.852">

  <clipPath id="clip" clipPathUnits="objectBoundingBox">
    <path transform="scale(0.00069)" d="M0 740.5V0H1440.5V557C1369 549 1193.8 549.4 1073 615C922 
    697 809 702.5 698.5 685C611.987 671.299 465 603 286 677C142.8 736.2 35.6667 744 0 740.5Z" 
    fill="#001E61"/>
    </clipPath>
  </svg>

Please refer to clipPathUnits documentation

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the method for retrieving child tags using the each statement?

How can I retrieve child tags using an each statement? <svg id="svgcontent" > <g id="layer" > <g> <g id="test1" > <g> <g id="test2"></g> <g id="test2"> </g> <svg> I am looking for the fo ...

jquerysvg

Extracting Twitter data - json file containing tweets from a user's feed

I'm currently working on a Python script to extract tweets from a specific user's timeline using the Tweepy API. However, I'm facing difficulty in saving the images that are attached to the tweets. I've attempted to extract the JSON dum ...

jsonimagepython-2.7twittertweepy

Tips for Transitioning a Div Smoothly Upwards with CSS!

This is the code that relates to the title: #main { float: left; width: 20%; height: 10vh; margin-top: 10vh; margin-left: 40%; text-align: center; } #k { font-family: Questrial; font-size: 70px; margin-top: -7px; ...

htmlcsscss-transitions

Turn off the footer button on materialize.css modal

I'm struggling to disable one of the modal footer buttons in materialize.css. I tried using disabled="disabled", but it doesn't seem to be working. You can see my example on jsfiddle. <a class="waves-effect waves-light btn modal-trigger" href ...

jqueryhtmlcssmaterialize

Is there an alternative method to invoke the function aside from setTimeOut()?

if(i==1){ this.resetScreens(); this.editJobScreen1 = true; if(this.selectedLocations.length > 0){ this.locationService.getLocationByInput({ maxResultCount:16, skipCount: 0 }).subscribe((ele)=>{ ...

angulartypescriptsvg

Resizing with Jquery results in sudden movement

I have used jQuery to create a set of buttons inside a <ul> element. I am now attempting to resize the <ul> by adding a handle to the top of it, but when I try to resize it, the element jumps as shown in the images below. What could be causing ...

jqueryhtmlcssjquery-ui

Steps to display a div on top of a background image

Here is a visual representation of my design for better understanding: I am currently working on developing the central content that overlays the image. However, when I insert divs with background colors into my HTML to test their placement, I do not see ...

javascriptjqueryhtmlcss

Is it possible for media queries to effectively support mobile devices?

I have a specific requirement for my <input type="number"> element where I need the up and down spinner buttons to be displayed for selecting the next value. However, on mobile devices, these spinner buttons are not visible. To address this ...

htmlcssmedia-queries

Steps for placing an image within the boundary of a rectangular div

My div has a width of approximately 730px and a height of 50px. I am looking to place an image at the bottom of the div, exactly where its height ends - after 50px. I have been considering a query to append the image at the bottom. One solution could be ...

csshtml

Unusual div image alignment when dimensions are dynamically adjusted with Javascript animations

I have created a basic webpage using JavaScript that aims to scale an element from the center of the page over time when clicked. It is functioning properly for the SVG element I tested it with. However, when I use an image, it initially appears outside o ...

javascripthtmlcssanimation

Guide to center-aligning ElementUI transfer components

Has anyone successfully incorporated ElementUI's transfer feature inside a card element and centered it? https://jsfiddle.net/ca1wmjLx/ Any suggestions on how to achieve this? HTML <script src="//unpkg.com/vue/dist/vue.js"></ ...

javascriptcssvue.jselement-ui

developing both vertical and horizontal 'cross out'

I'm attempting to add a 'spacer' between buttons on my website using the word "or" with a vertical line centered above and below it. I've tried HTML <div class="footer-btn-wrap"> <div class="decor"><a href="... < ...

htmlcss

Reacting to a situation where the tailwind grid has an issue: the responsive column span is visible in the HTML, but

I'm having an issue with a grid that is not behaving as expected. I have set up a jsfiddle to show the behavior I am looking for, which relies on the responsive code: col-span-3 md:col-span-2 for one of the items. The problem arises when I inspect th ...

htmlcssreactjstailwind-csscss-grid

Modifying a css class via javascript

Is it possible to set an element's height using CSS to match the window inner height without directly modifying its style with JavaScript? Can this be achieved by changing a CSS class with JavaScript? One attempted solution involved: document.getEle ...

javascriptcsssass

Creating Custom GTK Themes using CSS3

Just a quick question: Can CSS3 be used to style GTK3 applications? ...

cssgtk

Is there a way to divide extensive CSS files using Python?

The issue I am facing is due to the limitations of IE 8 on CSS files. Within my Flask project, some of my CSS files exceed these limits, causing them not to render correctly. Is there a way to split CSS files using Python in order to ensure that they meet ...

pythonhtmlcsspython-3.x

How Can You Create a Sliding List Animation (Up/Down) Using Angular and Twitter-Bootstrap?

Hey, can you give me a hand with this? :) I'm attempting to create a sleek sliding up and down list in Angular, but I'm struggling to make it work. My CSS skills are not very advanced, so I'm still learning and gave it my best shot: http:// ...

javascriptcssangularjstwitter-bootstrapcss-animations

Hover over the drop-down menu to enable tab on hover mode

Is it possible to make the tab switch to hover mode when I rollover the drop down sub-menu without using JavaScript, and only using CSS? <li id="anchor" class="title dropdown"><a href="#">Main Tab</a> <div class="co ...

htmlcss

What is the best way to eliminate empty spaces from the container?

click here check out this image too Just getting the hang of Bootstrap. The first picture looks good, with the image as the background. But on the second picture, there are margins and a background color showing up. How can I get rid of those margins? Her ...

htmlcssbootstrap-5

The column is not properly aligned

I am facing a challenge in aligning 3 elements using bootstrap while working with Angular 8. To include only the necessary CSS from Bootstrap (such as col-md and col classes), I have added the following to my styles array: "styles": [ "src/ ...

cssangularsassbootstrap-4