Question

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

简单地说＆＃39; HTML + CSS，我可以通过以下代码笔实现我想要的：https://codepen.io/earthican/pen/BJjgRv

＆＃13;

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);
}

＆＃13;

<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>

＆＃13;

但是，我在尝试将上述内容转换为Angular时遇到了麻烦。以下是我目前的情况：https://plnkr.co/edit/w2gVe91NEIdUlCWs3qkN?p=preview

我想我开始意识到Angular在SVG上的表现并不好。我还应该指出，我对Angular 2+和SVG来说是相当的新手，所以我无法确定。如果有人可以帮助或指出一些有用的资源，那将非常感激！

Answer 1

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

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

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

1 个答案: