클리핑, 마스크 및 병합

Windows Internet Explorer 9은 SVG 1.1(버전 2) 사양의 클리핑, 마스크 및 합치기 모듈(영문)에 지정된 대로 SVG 클리핑, 클리핑 패스, 마스크 및 불투명도를 새롭게 지원했습니다. SVG 경로는 이 문서의 경로 섹션에서 설명합니다.

클리핑

클리핑 패스는 색, 패턴 또는 이미지를 그릴 수 있는 영역을 잘라내거나 "클리핑"합니다. 클리핑 패스 바깥쪽에 있는 그래픽 요소의 모든 부분은 그려지지 않습니다. 클리핑 패스는 완전히 불투명합니다. 클리핑 패스 바깥쪽에 있는 그래픽 요소 부분은 완전히 표시되지 않습니다.

SVG에서 overflowclip 속성은 초기 클리핑 패스나 콘텐츠가 표시되는 모양을 설정합니다. 기본적으로 초기 클리핑 패스는 SVG 뷰포트나 SVG 콘텐츠가 표시되는 페이지의 사각형 영역으로 정의됩니다.

clipPath 요소는 클리핑 패스를 정의합니다. 클리핑 패스는 clip-path 속성을 사용하여 참조됩니다. clip-rule 속성은 clipPath 요소 내의 그래픽 요소에 적용되고, clipPathUnits 특성은 clipPath 콘텐츠의 좌표계를 정의합니다. 클리핑 패스는 텍스트와 색, 패턴 및 이미지에 적용할 수 있습니다.

SVGClipPathElement DOM 인터페이스를 사용하여 프로그래밍 방식으로 클리핑 기능에 액세스할 수 있습니다.

다음은 SVG 클리핑 패스의 간단한 예제입니다.


<?xml version="1.0" encoding="ISO-8859-1" standalone="no"?>
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
    "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
 <svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
         width="400" height="100">
 <clipPath id="clip1">
    <circle id="clipShape" cx="60" cy="60" r="50" />
 </clipPath>
 <rect x="20" y="20" width="100" height="100" fill="blue"
    clip-path="url(#clip1)" />
 </svg>

이 예제에서는 clipPath 요소를 사용하여 원 모양의 클리핑 패스를 정의합니다. 그런 다음 clip-path 속성을 사용하여 클리핑 패스를 사각형에 적용합니다. 그러면 Internet Explorer 9에서 다음과 같이 생성됩니다.

순환 클리핑 패스로 인해 잘린 사각형의 그림

마스크

마스크는 반투명인 경우를 제외하고 클리핑 패스와 유사합니다. 마스크는 주로 전경 개체를 현재 배경에 합치는 데 사용됩니다.

mask 요소는 마스크를 정의합니다. 마스크는 mask 속성을 사용하여 참조됩니다.

다음은 SVG 마스크의 간단한 예제입니다.


<?xml version="1.0" standalone="no"?>
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 <svg width="4cm" height="4cm" viewBox="0 0 800 300" version="1.1"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
  <desc>Example mask01 - three different colored circles used to mask the color of a rectangle
  </desc>
     <defs>
     <g id="circles">
            <g stroke="white" stroke-width="2" >
                <circle cx="100" cy="50" r="50" fill="rgb(255,0,0)" />
                <circle cx="50" cy="135" r="50" fill="rgb(0,255,0)" />
                <circle cx="150" cy="135" r="50" fill="rgb(0,0,255)" />
            </g>
        </g>       
        <mask id="myMask" >
            <use xlink:href="#circles" />
        </mask>
     </defs>
     <rect x="0" y="0" width="100%" height="100%" fill="purple"
          mask="url(#myMask)" />
 </svg>

이 예제에서는 mask 속성을 사용하여 색이 각기 다른 세 개의 인접한 원 모양의 마스크를 정의합니다. 그런 다음 mask 속성을 사용하여 마스크를 자주색 사각형에 적용합니다. 그러면 Internet Explorer 9에서 다음과 같이 생성됩니다.

삼각형 구성으로 인접한 3개의 원

관련 항목

SVG

 

 

표시:
© 2014 Microsoft. All rights reserved.