CSS-Maske funktioniert nicht ordnungsgemäß in Angular 5

Question

Ich versuche eine Angular 5 App zu erstellen, die aus einem maskierten/abgeschnittenen Bild besteht.

In plain ol‘HTML + CSS, kann ich erreichen, was ich mit dem folgenden Code Stift will: https://codepen.io/earthican/pen/BJjgRv

HTML:

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

CSS:

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

, ich jedoch habe Probleme, das oben genannte in Angular umzuwandeln. Hier ist, was ich bisher habe: https://plnkr.co/edit/w2gVe91NEIdUlCWs3qkN?p=preview

Ich denke, ich beginne zu erkennen, dass Angular nicht sehr gut mit SVG spielt. Ich sollte auch darauf hinweisen, dass ich ziemlich neu zu Angular 2+ und SVG bin, so kann ich nicht wirklich sicher sein. Wenn jemand helfen oder auf nützliche Ressourcen hinweisen kann, wird das sehr geschätzt!

Answer 1

Ich habe dies das mask Attribut von CSS zum SVG Baum durch Bewegung gelöst, d.h .:

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