svg 마스크의 브라우저 지원 및 최대 브라우저 지원을 얻는 방법

-1

svg로 이미지 슬라이더를 만들었습니다. 전환을 애니메이션화하기 위해 마스크를 사용했습니다. 애니메이션이 모바일에서 작동하지 않는 문제가 발생했습니다. 그래서 나는 그것이 문제의 원인이라고 기대했기 때문에 마스크 속성에 대한 브라우저 지원을 조사하기 시작했습니다. 대부분의 사이트는 데스크톱 브라우저에 대한 브라우저 지원을 표시하지만 모바일 브라우저에는 지원하지 않습니다. 무엇을 (모바일) 브라우저에서svg 마스크의 브라우저 지원 및 최대 브라우저 지원을 얻는 방법

는 가가 지원되지 않는 마스크를 SVG입니까?
svg 마스크에 대한 크로스 브라우저 지원을 향상시킬 수있는 방법이 있습니까?
브라우저가 자바 스크립트로 마스크를 지원하는지 여부를 감지 할 수 있습니까? (그렇다면 해당 브라우저의 애니메이션없이 폴백을 만들 수 있습니다)?

출처

2017-10-24 RMo

<switch> 요소를 사용하여 SVG 마크 업에서 기능 지원을 테스트 할 수 있습니다. UA가 마스크를 지원하면 첫 번째 그룹 만 렌더링되고 두 번째 그룹은 렌더링되지 않습니다.

<switch> 
    <g requiredFeatures="http://www.w3.org/TR/SVG11/feature#Mask"> 
     <!-- content that needs mask capability --> 
    </g> 
    <g> 
     <!-- fallback content here --> 
    </g> 
</switch>

중요 : 렌더링 할 수 실제로 요소는 당신이 스위치로 묶어야합니다. <mask> 요소는 렌더링되지 않고 참조 만되기 때문에 스위치는 아무 효과가 없습니다. 대신 mask 속성/스타일 속성을 가져 오는 요소를 묶으십시오.

DOMImplementation.hasFeature() 메서드도 있었지만 이제는 더 이상 사용되지 않으며 유용한 값을 반환하지 않을 수 있습니다.

출처

2017-10-24 17:27:09 ccprog

거의 모든 UA가 모든 기능을 지원되는 것으로보고합니다. –

@ccprog 답장 시간을내어 주신 Thx. DOMImplementation.hasFeature()는 내가 찾고있는 것처럼 보였다. 매우 불행한 일입니다. 스위치 요소를 추가하면 자바 스크립트를 생성하는 SVG에 좀 더 복잡한 기능이 추가 될 것입니다. DOMImplementation.hasFeature()에 대한 자바 스크립트 대안이 있습니까? 왜이 기능이 훼손되고있는가? – RMo

그것은 쓸모 없어서 양심의 가책을 느꼈습니다. 브라우저 제조업체는 스위치를 사용할시기를 알지 못했습니다. 스위치를 true 또는 false로 설정해야 마스크 외에도 거의 모든 측면을 지원할 수 있습니다. 마스크에서 버그를 발견 한 경우 스위치가 true 또는 false입니까? 스위치 등은 내부적으로 hasFeature를 사용하기 때문에 더 이상 기능 테스트를 수행하지 않습니다. –

svg 마스크의 브라우저 지원 및 최대 브라우저 지원을 얻는 방법

답변

관련 문제