Firefox 또는 IE에서 SVG 이미지 마스크가 작동하지 않습니다.

나는 크롬과 같은 브라우저에 PNG (검은 색 원, 투명한 배경) 및 -webkit-mask-image:url(images/mask.png) 마스크를 쉽게 만들었습니다. 하지만 난이 작동하지 않는 이유를 정말 볼 수없는 SVGFirefox 또는 IE에서 SVG 이미지 마스크가 작동하지 않습니다.

<svg> 
    <defs> 
     <mask id="mask" maskUnits="userSpaceOnUse" maskContentUnits="userSpaceOnUse"> 
      <image width="78px" height="78px" xlink:href="images/mask.png"/> 
     </mask> 
    </defs> 
    <foreignObject width="78px" height="78px" style="mask: url(#mask);"> 
     <img src="images/avatar-sample.jpg" /> 
    </foreignObject> 
</svg>

를 사용하여 파이어 폭스에 표시 할 마스크를 점점 심각한 문제가있다!

출처

2013-05-01 Glen

내가 그것을 작동있어 좋아하지만, 어떤 임의의 장소에 이미지를 이동하는 것 – Glen

괜찮 았어. FF지만 IE에서는 작동하지 않습니다 ... – Glen

http://www.w3.org/TR/SVG/propidx.html에 따르면 container elements 및 graphics elements에 마스크를 적용 할 수 있습니다. 불행히도 <foreignObject>은 이러한 목록에 없으므로 해당 요소의 올바른 렌더링은 마스크 속성을 무시하는 것입니다. IE와 Firefox는이 예제의 렌더링에서 정확합니다.

출처

2013-05-01 22:20:29

foreignObject에도 마스크/클립 경로/필터를 적용하는 것이 좋습니다. IE는 foreignObject를 지원하지 않습니다 (적어도 시도한 마지막 시간은 아닙니다). Firefox는 이미 foreignObject (fiddle : http://jsfiddle.net/UYZW9/)의 'filter'속성을 처리하는 것처럼 보이고 'filter'는 'mask'와 같은 요소 (컨테이너 및 그래픽 요소)에 적용됩니다. 어쨌든이 모든 속성이 "모든"요소에서 작동하도록 확장되고 있다고 생각합니다. –

IE는 "외부"개체를 이해할 수 없으므로 javascript로 해결하고 지원할 수 있는지 확인해야합니다. 삽입 할 수 있으면 삽입하고 피하지 않으면 확인해야합니다. IE 용으로 만들어진 chromakey 효과를 만들기 위해 IE의 컬러 필터를 사용해야합니다. 이 사이트는 예제를 통해이를 수행하는 방법을 보여줍니다.

http://thenittygritty.co/css-masking

출처

2013-07-30 13:41:20 Zuriel

-1

당신은 모든 SVG-지원하는 브라우저에서 작동하려면이처럼 SVG를 다시 작성할 수 :

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
    <defs> 
     <mask id="mask" maskUnits="userSpaceOnUse" maskContentUnits="userSpaceOnUse"> 
      <image width="78" height="78" xlink:href="images/mask.png"/> 
     </mask> 
    </defs> 
    <image xlink:href="images/avatar-sample.jpg" width="78" height="78"/> 
</svg>

출처

2013-08-23 10:46:02

Firefox 또는 IE에서 SVG 이미지 마스크가 작동하지 않습니다.

답변

관련 문제