CSS掩码在Angular 5中无法正常工作

Question

我正在尝试创建一个由蒙版/剪裁图像组成的Angular 5应用。

在普通的ol'html css中，我可以通过以下代码笔来实现我想要的东西：https：//codepen.io/earthican/pen/pen/bjjgrv

body,
html,
.img {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  background-color: white;
  overflow: hidden;
}
svg {
  pointer-events: none;
  width: 100%;
  height: 100%;
  position: absolute;
  background: transparent;
  fill: transparent;
  mask: url(#polygon-mask);
}

<svg id="mask">
<defs>
  <mask id="polygon-mask" x="0" y="0" width="960" height="588" >
    <rect id="reverse-mask" fill="white" x="0" y="0" width="960" height="588" ></rect>
    <polygon fill="red" points="112,62 162,112 162,162 62,162 62,112"></polygon>
  </mask>
  </defs>
  <rect width="960" height="588" fill="teal"></rect>
</svg>
<div class="img">
  <img src="https://i.pinimg.com/originals/53/5e/5b/535e5b3744dbb8264a7ebba5f29f44ca.jpg" style="margin-left: 0px; margin-top: 0px;">
</div>

但是，我很难将上面的角度转换为Angular。这是我到目前为止所拥有的：https：//plnkr.co/edit/w2gve91neidulcws3qkn？

我认为我开始意识到Angular在SVG方面表现不佳。我还应该指出，我是Angular 2 和SVG的新手，所以我真的不确定。如果有人可以帮助或指出一些有用的资源，这将是非常感谢的！

Answer 1

我通过将mask属性从CSS移至SVG树，即：

来解决此问题。

<svg mask="url(#polygon-mask)">
  ...
</svg>