html - 如何在适用于 IE9 的图像上制作圆形剪贴蒙版？

Question

我现在使用的代码是这样的:(请注意，这是在 css less 中格式化的。)它似乎不适用于 IE9 或更早版本，在查看它之后我找不到合适的格式。

.mixin-clip-path-circle(@1,@2,@3) {
  -webkit-clip-path: circle(@1, @2, @3); 
  -moz-clip-path: circle(@1, @2, @3);
  clip-path: circle(@1, @2, @3);
}

.user-portrait {
  position: relative;
  display:inline-block;
  .clipped-portrait {
    .mixin-clip-path-circle(3.4rem, 3.4rem, 3.4rem);
    min-height: 6.8rem;
    position: absolute;
    display:block;
  }

<div class="user-portrait">
     <img src="img/styleguide/portrait-picture-example.png" class="clipped-portrait" />
</div>

编辑:明确地说，我正在寻找一种在 IE9 中实现此功能的方法，它不必与 clip-path 属性一起使用。

Answer 1

MDN ( https://developer.mozilla.org/en-US/docs/Web/SVG/Element/clipPath ) 似乎表明 clip-path 仅在 IE9+ 中受支持。