CSSマスクがAngular 5で正しく機能しない

Question

マスクされた/切り抜かれた画像からなるAngular 5アプリを作成しようとしています。

平野老いたHTML + CSSで

、私は次のコードをペンで私が欲しいものを達成することができます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); 
} 

をしかし、私は、上記を角に変換しようとするのに問題があります。ここで私がこれまで持っているものです：https://plnkr.co/edit/w2gVe91NEIdUlCWs3qkN?p=preview

私は角度がSVGで非常にうまく再生されないことを認識し始めていると思います。また、私はと公平にとAngular 2+とSVGが新しくなっていることを指摘しておく必要があります。誰かが役に立つリソースを手助けしたり指摘したりすることができれば、それは大いに感謝されます！

Answer 1

私はすなわち、CSSからSVGツリーにmask属性を移動することで、これを解決した。：

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

を