제10장. Clipping & Masking

제10장. Clipping & Masking

클리핑(Clipping)

초기 클립 패스 : 뷰박스, 뷰포트
클립 패스의 설정
- <defs> 에서 <clipPath>를 정의하고,
  <clipPath id="..." clipPathUnits="..." clip-rule="..."> 패스, 텍스트, 도형 등 </clipPath>
- <g>, <그래픽 개체> 등 그리기에서 clip-path 속성으로 참조(사용)
  clip-path="url(#id)" clip-rule="..."

<svg width="8cm" height="8cm" viewBox="0 0 240 240" >
<defs>
<radialGradient id="MyGrad" gradientUnits="userSpaceOnUse"
                          cx="120" cy="130" r="120" fx="120" fy="130">
     <stop offset="0.6" stop-color="#20DD60" stop-opacity="1" />
     <stop offset="1" stop-color="#20DD60" stop-opacity="0.1" />
</radialGradient>
<clipPath id="MyClip1">
     <path d="M 120,5 L 5,91 47,231 193,231 235,91 z"
                clip-rule="nonzero"/>
</clipPath>
<clipPath id="MyClip2">
     <path d="M 120,60 A 70,70 0 0,1 120,200 A 70,70 0 0,1 120,60 z" />
</clipPath>
</defs>

<rect x="0" y="0" width="240" height="240" stroke="red"
         stroke-width="4" fill="none" />
<g clip-path="url(#MyClip1)" >
   <rect x="0" y="0" width="240" height="240" fill="url(#MyGrad)" />
   <text id="Text" x="120" y="55" font-family="Verdana"
           font-size="30" text-anchor="middle" >Princess</text>
</g>
<g clip-path="url(#MyClip2)" >
   <rect x="0" y="0" width="240" height="240" />
   <image x="42" y="50" width="152" height="171"
               xlink:href="../image/june-3.jpg" />
</g>
</svg>

마스킹(Masking)

마스크 효과 (알파 채널)
사용 방법
- <defs> 에서 <mask>를 정의하고,
  <mask id="..." maskUnits="..." x="..." y="..." width="..." height="..."> 그리기 </mask>
- <g>, <그래픽 개체> 등 그리기에서 mask 속성으로 참조(사용)
  mask="url(#id)"

<svg width="8cm" height="8cm" viewBox="0 0 800 800">
<defs>
<linearGradient id="Gradient" gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="800" y2="0">
      <stop offset="0" stop-color="white" stop-opacity="0" />
      <stop offset="1" stop-color="white" stop-opacity="1" />
</linearGradient>
<mask id="Mask" maskUnits="userSpaceOnUse" x="0" y="0" width="800" height="800">
      <rect x="0" y="0" width="800" height="800" fill="url(#Gradient)" />
</mask>
<text id="Text" x="400" y="100" font-family="Verdana" font-size="100" text-anchor="middle" >
        Masked text </text>
</defs>
<rect x="0" y="0" width="800" height="800" fill="#FFAAAA" />

<use xlink:href="#Text" transform="translate(0,50)" fill="none"
     stroke="black" stroke-width="4" />
<use xlink:href="#Text" transform="translate(0,150)" fill="blue"
     mask="url(#Mask)" />
<use xlink:href="#Text" transform="translate(0,250)" fill="blue"
     stroke="black" stroke-width="4" mask="url(#Mask)"/>
<use xlink:href="#Text" transform="translate(0,350)" fill="blue"
     mask="url(#Mask)" />
<use xlink:href="#Text" transform="translate(0,350)" fill="none"
     stroke="black" stroke-width="4" />

<rect x="100" y="500" width="600" height="50" fill="cyan"
     stroke="blue" stroke-width="6" />
<rect x="100" y="580" width="600" height="50" fill="none"
     stroke="blue" stroke-width="6" mask="url(#Mask)"/>
<rect x="100" y="660" width="600" height="50" fill="cyan"
     stroke="blue" stroke-width="6" mask="url(#Mask)"/>
</svg>

투명도의 특성

객체와 그룹의 투명도 처리
- 각 객체의 투명도 처리하여 렌더링 한 후 그룹의 렌더링을 한다

<svg width="12cm" height="3.5cm" viewBox="0 0 1200 350">
<rect x="1" y="1" width="1198" height="348"
fill="none" stroke="blue" />
<rect x="100" y="100" width="1000" height="150" fill="#0000ff"/>

<circle cx="200" cy="100" r="50" fill="red" opacity="1" />
<circle cx="400" cy="100" r="50" fill="red" opacity=".8" />
<circle cx="600" cy="100" r="50" fill="red" opacity=".6" />
<circle cx="800" cy="100" r="50" fill="red" opacity=".4" />
<circle cx="1000" cy="100" r="50" fill="red" opacity=".2" />

<g opacity="1" >
<circle cx="182" cy="250" r="50" fill="red" opacity="1" />
<circle cx="217" cy="250" r="50" fill="green" opacity="1"/>
</g>
<g opacity=".5" >
<circle cx="382" cy="250" r="50" fill="red" opacity="1" />
<circle cx="417" cy="250" r="50" fill="green" opacity="1"/>
</g>
<g opacity="1" >
<circle cx="582" cy="250" r="50" fill="red" opacity=".5"/>
<circle cx="617" cy="250" r="50" fill="green" opacity=".5"/>
</g>
<g opacity="1" >
<circle cx="817" cy="250" r="50" fill="green" opacity=".5"/>
<circle cx="782" cy="250" r="50" fill="red" opacity=".5"/>
</g>
<g opacity=".5" >
<circle cx="982" cy="250" r="50" fill="red" opacity=".5" />
<circle cx="1017" cy="250" r="50" fill="green" opacity=".5"/>
</g>
</svg>

Boundary Box

Background blue rectangle

[upper] Red circles going from opaque to nearly transparent

   opacity=(1, 0.8, 0.6, 0.4, 0.2)

Opaque group, Opaque circles
   opacity = 1x1 = 1

opaque circle green on red, and then 0.5 transparent Group
   opacity = 1x0.5 = 0.5

0.5 transparent green over red,
and then Opaque group
   opacity = 0.5x1 = 0.5

0.5 transparent red over green
and then Opaque group
   opacity = 0.5x1 = 0.5

0.5 transparent green over red
and then Group opacity 0.5
   opacity = 0.5x0.5 = 0.25