How to make clip-path work on Microsoft Edge?

Question

While making a clipped header for Firefox and Microsoft Edge(ME), I used clip-path. It works in Firefox just by putting clipPath element inside an SVG element and a clip-path style inside the HTML element. When I open this same code on ME, it doesn't show anything.

Answer 1

Microsoft only supports the CSS clip-path property in SVG:

#foo { clip-path: url(#myClipPath) }
#content { position: relative; }
#content span { position: absolute; } 
#content span { top:50px; left: 50px; }

<div id="content">
  <span>Hi</span>
  <svg width="400" height="400">
		
      <defs>
        <clipPath id="myClipPath">
          <circle cx=100 cy=100 r=50 />
        </clipPath>
      </defs>
			
	  <path id="foo" d="M 50,100 Q 150,50 250,100" stroke="hotpink" stroke-width="10" fill="white"></path>
  </svg>
</div>

Use relative/absolute positioning to layer the HTML content over the SVG as a cross-browser solution.

References

• clip-path attribute | clipPath property (Internet Explorer)