HTML5 9의 SVG 2D 소개 - 마스크 및 마스크 요소 소개 및 적용_html5 튜토리얼 기술
- WBOY원래의
- 2016-05-16 15:50:111399검색
SVG 지원 마스크
SVG는 다양한 마스크 효과를 지원합니다. 이러한 기능을 사용하면 다양한 멋진 효과를 만들 수 있습니다. 마스크를 중국어로 "마스크"라고 부르든, "마스크"라고 부르든 여기서는 구분하지 않겠습니다.
SVG가 지원하는 마스크 유형:
1. 클리핑 경로(clipping path)
클리핑 경로는 경로, 텍스트 또는 기본 그래픽으로 구성된 그래픽입니다. 클리핑 경로 내의 모든 그래픽은 표시되고 클리핑 경로 외부의 모든 그래픽은 표시되지 않습니다.
2. 마스크/마스크
마스크는 모양 집합을 정의하고 이를 전경 개체와 배경을 결합하는 데 사용할 수 있는 반투명 매체로 사용하는 컨테이너입니다.
클리핑 경로와 다른 마스크의 중요한 차이점은 클리핑 경로가 1비트 마스크라는 것입니다. 즉, 클리핑 경로로 덮인 객체는 완전히 투명하거나(가시적, 클리핑 경로 내부에 있음) 완전 불투명(보이지 않음, 클리핑 경로 외부). 마스크는 다양한 위치의 투명도를 지정할 수 있습니다.
창의 클립 경로 - 오버플로 및 클립 속성
HTML 요소의 오버플로 속성과 클립 속성은 요소 콘텐츠의 클리핑 동작을 공동으로 설정합니다. 마찬가지로 SVG에서도 이 두 속성을 사용할 수 있습니다.
overflow = visible | hide | auto | acquire
overflow 속성은 요소의 콘텐츠가 요소의 테두리를 초과할 때 수행되는 동작을 정의합니다.
이 속성은 새 창(svg, 기호, 이미지, foreignObject)을 생성할 수 있는 요소, 패턴 및 마커 요소에 사용할 수 있습니다. 이 속성의 값 의미는 다음과 같습니다.
visible: 콘텐츠가 이미 요소 테두리 밖에 있어도 모든 콘텐츠를 표시하는 기본값입니다.
숨김: 클리핑 경로 너머의 콘텐츠를 숨깁니다. 클리핑 경로는 클립 속성에 의해 지정됩니다.
스크롤: 스크롤 막대 형태를 사용하여 초과 콘텐츠를 표시합니다.
자동: 브라우저 정의 동작을 사용합니다. 이는 신뢰할 수 없는 것 같습니다.
이 속성은 기본적으로 CSS2의 동일한 이름 속성과 동일하지만 SVG에서는 처리 프로세스가 약간 다릅니다.
1. 오버플로 속성은 새 창을 생성하는 것 이외의 요소(svg, 기호, 이미지, foreignObject), 패턴 및 마커 요소 이외의 요소는 효과가 없습니다.
2. 클리핑 경로는 창에 해당합니다. 새 창이 생성되면 새 클리핑 경로가 생성됩니다. 기본 클리핑 경로는 뷰포트 경계입니다.
clip =
이 속성은 새 창(svg, 기호, 이미지, foreignObject)을 만들 수 있는 요소, 패턴 및 마커 요소에 사용할 수 있습니다. 이 속성은 동일한 이름의 CSS2 속성과 동일한 매개변수를 갖습니다. 자동은 클리핑 경로가 창 테두리와 일치함을 의미합니다. 그래픽을 매개변수로 사용하는 경우(자르기 직사각형의 위쪽, 오른쪽, 아래쪽 및 왼쪽 값 설정) 사용자 좌표값(즉, 단위가 없는 좌표)을 사용할 수 있습니다. 예:
P { 클립 : 직사각형(5px, 10px, 10px, 5px) }
기본적으로(오버플로와 클립 모두 기본값이 있음) 클리핑 경로는 창 테두리와 일치합니다. viewBox 및 PreserveAspectRatio가 설정되면 일반적으로 일부 표시 효과가 여전히 동일하도록(물론 모두 기본값인 경우) 클리핑 경로의 4개 측면을 viewBox의 4개 측면에 매핑해야 합니다. , 설정할 필요가 없습니다).
객체의 클리핑 경로 -clipPath 요소
클리핑 경로는clipPath 요소를 사용하여 정의된 다음,clip-path 속성을 사용하여 참조됩니다.
clipPath에는 경로 요소, 텍스트 요소, 기본 그래픽 요소(원 등) 및 사용 요소가 포함될 수 있습니다. 사용 요소인 경우 경로, 텍스트, 기본 그래픽 요소를 직접 참조해야 하며, 다른 요소는 참조할 수 없습니다.
클리핑 경로는 1비트 마스크 레이어일 뿐이며 경로는 포함된 모든 요소의 결합입니다. 이 컬렉션의 개체는 표시될 수 있지만 이 범위에 없는 개체는 표시되지 않습니다. 특정 결정 지점이 범위 내에 있는지 여부를 결정하는 알고리즘은 "clip-rule" 속성에 의해 지정됩니다.
그래픽 개체의 경우 클리핑 경로는 자체 클립 경로로 설정된 클리핑 경로와 모든 외부 요소(클립 경로 및 오버플로로 설정된 클리핑 경로 포함)의 클리핑 경로의 합집합과 같습니다. 몇 가지 사항에 유의하세요.
1. ClipPath 요소 자체는 외부 노드에서 ClipPath로 정의된 클리핑 경로를 상속하지 않습니다.
2. ClipPath 요소 자체가 클립 경로 속성을 설정할 수 있습니다. 효과는 두 경로의 교차점입니다.
3. ClipPath 요소의 하위 요소는 클립 경로 속성을 설정할 수 있습니다. 효과는 두 경로의 결합입니다.
4. 빈 클리핑 경로는 요소 내의 모든 콘텐츠를 잘라냅니다.
몇 가지 중요한 속성을 살펴보겠습니다.
clipPathUnits = "userSpaceOnUse(기본값) | objectBoundingBox"
이 속성은 클립 경로에서 사용하는 좌표를 정의합니다. 요소 시스템(우리 모두에게 친숙한 이 두 값)은 현재 클리핑 경로와 경계 상자 크기 값을 참조하는 요소의 사용자 좌표계입니다.
clipPath 요소는 직접 렌더링되지 않고 클립 경로를 통해 참조되므로 클립 경로 요소의 표시 속성을 설정해도 아무런 효과가 없습니다.
clip-path = "
말할 필요도 없이 이 속성은 클리핑을 참조하는 데 사용됩니다. path 의 경우 모든 컨테이너 요소, 기본 그래픽 요소 및 ClipPath 요소가 이 속성을 사용할 수 있다는 점에 유의해야 합니다.
clip-rule = "nonzero(기본값) | evenodd | 상속"
이 속성은 클리핑 패스 내부의 지점에 속하는 지점을 결정하는 데 사용됩니다. 단순한 닫힌 모양의 경우 결정하기 쉽지만 내부에 구멍이 있는 복잡한 모양의 경우 차이가 있습니다. 이 속성의 값은 fill-rule의 값과 동일한 의미를 가집니다:
0이 아님: 이 값에 사용되는 알고리즘은 다음과 같습니다. 결정될 점에서 임의의 방향으로 선을 방출한 다음 점의 방향을 계산합니다. 그래프와 선분의 교차점 계산 결과는 0부터 시작하여 교차점의 선분이 왼쪽에서 오른쪽으로 갈 때마다 1을 더합니다. 1; 모든 교차점을 계산한 후 이 계산 결과가 0이 아닌 경우 해당 점이 그래프 내에 있으므로 채워야 합니다. 값이 0이면 해당 점이 그래프 외부에 있고 그래프에 포함되지 않습니다. 채워야합니다. 아래 예를 살펴보세요.
evenodd: 이 값에 사용되는 알고리즘은 결정하려는 점에서 임의의 방향으로 선을 시작한 다음 그래프와 선분 사이의 교차점 수를 계산하는 것입니다. 홀수인 경우 그래프 내의 점을 변경해야 합니다. 숫자가 짝수인 경우 점은 그래픽 외부에 있으므로 채울 필요가 없습니다. 아래 예를 살펴보세요.
clip-rule 속성은clipPath 요소의 내부 그래픽 요소에만 사용할 수 있습니다. 예를 들어 다음 설정이 작동합니다.
요소가 없으면 작동하지 않습니다. 클립패스에서. 예를 들어 다음 설정은 작동하지 않습니다.
< ;/clipPath>
<직접 클립 경로="url(#MyClip)" 클립-규칙="evenodd" ... />
마지막으로 클리핑 경로의 작은 예를 살펴보십시오.
사각형 왼쪽 상단의 10*10 영역만 보입니다.
마스크 - 마스크 요소
SVG에서는 그래픽 요소나 g 요소를 렌더링된 개체의 마스크로 지정하여 렌더링된 개체를 배경에 결합할 수 있습니다. .
마스크는 마스크 요소로 정의됩니다. 마스크를 사용할 때는 객체의 마스크 속성에서 마스크를 참조하기만 하면 됩니다.
마스크 요소에는 모든 그래픽 요소와 컨테이너 요소(예: g)가 포함될 수 있습니다.
사실 마스크의 효과는 누구나 알고 있습니다. 기본적으로 마스크의 각 점의 색상과 투명도를 기준으로 최종 투명도를 계산한 다음 개체를 렌더링할 때 개체에 대해 서로 다른 투명도로 마스크합니다. 마스크 레이어는 마스크의 차단 효과를 반영합니다. 객체를 렌더링하는 경우 마스크 점의 투명도에 따라 마스크 내부 부분만 렌더링되고 마스크 외부 부분은 표시되지 않습니다. 아래 예를 보세요.
xmlns="http://www.w3.org/2000/svg" xmlns:xlink ="http:/ /www.w3.org/1999/xlink">
<중지 offset="1" stop-color="white" stop-opacity="1" />
마스크된 텍스트