Easiest Way to Convert Polygon Clip-Path to Microsoft Edge Supported "Clippath" Svg

Converting clip-path: polygon() to Edge-compatible SVG

You have a few errors:

1. The clipPath elements have the same id as the divs. I've changed this by adding cp- to the clipping paths id

2. When you transformed from % to units you have 6% = .6 instead of 6% = .06. Also in your code 100% = .1 instead of 100% = 1

body{height:500px;}

.you-headshot {
    position: relative;
    max-width: 500px;
    max-height: 500px;
    background-color: #a3a3a1;
    width: 100%;
    height: 100%;
    border-radius: 400px;
    overflow: hidden;
  }

  .you-headshot div {
    position: absolute;
    height: 100%;
    width: 100%;
  }

  .you-head-outline {
    background-color: #000;
    clip-path: url(#cp-you-head-outline)
  }

  .you-neck-outline {
    background-color: #000;
    clip-path: url(#cp-you-neck-outline)
  }

<svg width="0" height="0">
 <clipPath id="cp-you-head-outline" clipPathUnits="objectBoundingBox">
    <polygon points=".48, .06, .43, .07, .38, .09, .34, .12, .29, .16, .24, .22, .22, .30, .22, .44, .23, .50, .23, .65, .25, .72, .28, .77, .32, .82, .35, .86, .40, .90, .43, .92, .50, .93, .55, .91, .62, .87, .70, .76, .74, .69, .75, .64, .75, .54, .74, .49, .74, .40, .74, .32, .71, .23, .66, .15, .59, .09, .53, .06"/>
  </clipPath>
  <clipPath id="cp-you-neck-outline" clipPathUnits="objectBoundingBox">
    <polygon points=".29, .77, .28, .88, .23, 1, .24, 1, .76, 1, .68, .90, .67, .87, .65, .71"/>
  </clipPath>
 <polygon points=".29, .77, .28, .88, .23, 1, .24, 1, .76, 1, .68, .90, .67, .87, .65, .71"/>
</svg>

<div class="you-headshot">
  <div class="you-neck-outline">
  </div>
  <div class="you-head-outline">
  </div>
</div>

How to make clip-path work on Microsoft Edge?

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>

Related Topics