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

【问题标题】：CSS mask not working properly in Angular 5CSS掩码在Angular 5中无法正常工作
【发布时间】：2018-06-01 09:42:51
【问题描述】：

我正在尝试创建一个包含蒙版/剪辑图像的 Angular 5 应用程序。

在普通的 HTML + CSS 中，我可以使用以下代码笔实现我想要的：https://codepen.io/earthican/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?p=preview

我想我开始意识到 Angular 不能很好地与 SVG 配合使用。我还应该指出，我相当是 Angular 2+ 和 SVG 的新手，所以我不能确定。如果有人可以帮助或指出一些有用的资源，将不胜感激！

【问题讨论】：

标签： css angular svg mask

【解决方案1】：

我已经通过将 mask 属性从 CSS 移动到 SVG 树来解决这个问题，即：

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

【讨论】：