파이어 폭스에서 '마스크'문제가 발생했습니다.

여기 내 로프 끝에 있습니다. 이 '가면'이 제대로 작동해야합니까? 글쎄, 나는 의심하기 시작했다. 내 예제는 http://50.63.191.172/mask.html입니다.파이어 폭스에서 '마스크'문제가 발생했습니다.

나는 정말로 내가 할 수있는 다른 것을 모른다. 나는 몇 가지 제약 조건을 가지고있다 :

여러 위치에서 사용될 것이기 때문에 svg를 외부 HTML 페이지/CSS 스타일 시트에 갖고 싶다.
다양한 크기의 여러 버전을 갖고 싶지 않기 때문에 미리 크기가 비공식 SVG로 지정하고 싶습니다. 하나만 있어야 브라우저에 의해 캐시 될 수 있습니다.
이미지를 안에 넣을 수 없습니다. svg. svg는 잠재적 인 이미지에 적용 할 스타일입니다.

나는이 방법을 시도했지만 여러 가지 방법으로 시도했지만 지금까지는 행운이 없다. '-webkit-mask'속성을 사용하여 Chrome/Safari에서 정상적으로 작동합니다. 필자가 절대 픽셀로 마스킹 릿의 너비와 높이를 지정하면 100 %가 아닌 firefox와 'mask'로 "어느 정도"성공했습니다. 내가 원하는 것 (파이어 폭스에서 자동 스케일링 마스크)이 가능한 것인가? 그렇다면 무엇을 놓치고 있습니까?

내가 페이지를 다시로드하는 경우, 이미지가 마스크 처리되지 않은 상태로 표시되며, 마침내 표시가 끝난 후 바로 지워집니다.

여기 내 SVG입니다 :

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"> 
<defs> 
    <mask id="c1"> 
    <g id="group"> 
    <linearGradient id="g" gradientUnits="objectBoundingBox" x2="0" y2="1"> 
     <stop stop-color="white" offset="0"/> 
     <stop stop-color="white" stop-opacity="0" offset="1"/> 
    </linearGradient> 
    <rect x="0" y="0" width="100%" height="100%" fill="url(#g)" /> 
    </g> 
    </mask> 
</defs> 
<use xlink:href="#group"/> 
</svg>

그리고 이것은 내 HTML/CSS를 결합이다 : 나는 무엇을 놓치고

<html lang="en"> 
<head> 
<meta charset=utf-8> 
<title>Testing mask in various browsers</title> 
<style> 
    .masked { 
    mask: url(mask.svg#c1); /*Firefox */ 
    -webkit-mask: url('mask.svg'); /*Chrome, Safari */ 
    } 
    .nob { 
    border: none; 
    outline: none; 
    } 
    div.stage { position: relative; } 
.inline 
{ 
    display: inline-block; 
} 
span.stage 
{ 
    background-repeat: no-repeat; 
    background-position: center; 
    display: inline-block; 
    position: absolute; 
    left: 0px; 
    top: 0px; 
} 
    .big { width:600px; height:588px; } 
    .normal { width:300px; height:294px; } 
    .small { width:150px; height:147px; } 
</style> 
</head> 
<body style="background-image: url(background.gif);"> 
<div class="stage inline big"> 
    <a class="nob" href="mask.html"><img class="nob masked" src="b_pic.jpg"/></a> 
</div> 
<div class="stage inline normal"> 
    <a class="nob" href="mask.html"><img class="nob masked" src="pic.jpg"/></a> 
</div> 
<div class="stage inline small"> 
    <a class="nob" href="mask.html"><img class="nob masked" src="s_pic.jpg"/></a> 
</div> 
</body> 
</html>

출처

2013-05-25 user2419361

FF는 백분율을 나타내지 않습니다. 대신 0에서 1 사이의 objectBoundingBox 단위로 작업하는 것을 좋아합니다. Chrome/Safari는 그렇게 좋아하지 않습니다. 그러나 차이를 나누는 방법이 있습니다. 다음은 현재 최적화 할 작업 버전입니다.

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"> 
    <defs> 
    <mask id="c1" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox"> 
     <g id="group1"> 
     <linearGradient id="g1" gradientUnits="objectBoundingBox" x2="0" y2="1"> 
      <stop stop-color="white" offset="0"/> 
      <stop stop-color="white" stop-opacity="0" offset="1"/> 
     </linearGradient> 
     <rect x="0" y="0" width="1" height="1" fill="url(#g1)" /> 
     </g> 
    </mask> 
    <mask id="c2"> 
     <g id="group2"> 
     <linearGradient id="g2" gradientUnits="objectBoundingBox" x2="0" y2="1"> 
      <stop stop-color="white" offset="0"/> 
      <stop stop-color="white" stop-opacity="0" offset="1"/> 
     </linearGradient> 
     <rect x="0" y="0" width="100%" height="100%" fill="url(#g2)" /> 
     </g> 
    </mask> 
    </defs> 
    <use xlink:href="#group2"/> 
</svg>

그래서 그것은 이 수행 할 수 있습니다 간다.

출처

2013-05-29 04:42:23 user2419361

이 문제도 있습니다. 얼마나 정확하게 파이어 폭스와 다른 브라우저를 위해 일하게하나요? 디. – v3nt

파이어 폭스에서 '마스크'문제가 발생했습니다.

답변

관련 문제