I have an svg file as follows:
<svg width="0" height="0">
<defs>
<clipPath id="clipPath">
<path fill="#FFFFFF" stroke="#000000" stroke-width="1" stroke-miterlimit="10" d="M747,2.57515079 L747,3.15030159 C747,3.15030159 463.030826,3.13667895 462.728471,3.12621911 C462.222714,3.10872258 461.630798,3.09121037 460.95794,3.07485552 C447.997488,2.75983159 432.79976,3.2678378 418.328583,5.25984901 C390.557899,9.08258652 374,17.3735224 374,31 L373.895277,31 C373.964911,31.6537709 374,32.3203864 374,33 L372,33 C372,19.3727062 355.48774,11.0824565 327.791893,7.25979956 C313.359738,5.26783378 298.202909,4.75983638 285.277372,5.07485394 C284.606332,5.09120833 284.016017,5.10872 282.85724,5.15030159 L2,5.15030159 L2,265 L745,265 L745,267 L745.871447,267 L746.742894,267 L746.742894,265 L745,265 Z" id="Combined-Shape"></path>
</clipPath>
</defs>
</svg>
and my css:
#outline {
clip-path: url('../../dist/img/notch-outline-export2.svg#clipPath');
}
For some reason the svg clip-path is not showing up in Chrome
