CSS 마스크가 각도 5에서 제대로 작동하지 않습니다.

마스크 된/잘린 이미지로 구성된 각도 5 앱을 만들려고합니다.CSS 마스크가 각도 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); 
}

을 그러나, 나는 위를 Angular로 변환하는 데 문제가 있습니다. 여기에 내가 지금까지 가지고있는 것이있다 : https://plnkr.co/edit/w2gVe91NEIdUlCWs3qkN?p=preview

나는 Angular가 SVG에서 잘 작동하지 않는다는 것을 깨닫기 시작했다. 나는 또한 내가 이고 Angular 2+와 SVG에 새로운이 새롭다는 것을 지적해야한다. 그래서 나는 정말로 확신 할 수 없다. 누구든지 도움이되거나 유용한 자료를 지적 할 수 있다면 크게 환영 할 것입니다!

출처

2017-12-19 earthican

은 내가 SVG 트리, 즉 :

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

에 CSS에서 mask 속성을 이동하여이 문제를 해결했다

출처

2017-12-19 18:11:17 earthican

CSS 마스크가 각도 5에서 제대로 작동하지 않습니다.

답변

관련 문제