Responsive clip-path with inline SVG

Question

On an element with a background (image or solid color don\'t really matter):

I am trying

Answer 1

References to SVG clip paths are to the clip path definitions themselves and the dimensions or other attributes of the are meaningless in this context.

What is happening in your example is that you are applying a 4000 px wide clip path to your header. Which is probably only of the order of 900 px wide. So the curvature isn't visible.

If you want a responsive clip path, you should define it using clipPathUnits="objectBoundingBox".

#block-header {
    background: Red;
    min-height: 100px;
    -webkit-clip-path: url(#myClip);
	clip-path: url(#myClip);
}

SVG image


clip-path using the same SVG

    
    

Fiddle here