吉本集の個人ブログ
Web制作の技術について書いています。たまに日記も書きます。

【SVG】クリッピングパス

2015年3月4日 / category : svg

クリッピングパスについて、軽く触れます。クリッピングパスは、clipPath要素で設定します。
構造に関しては、

<g>
 <clipPath id="cp">
  <path />
 </clipPath>
 <rect clip-path="url(#cp)" />
</g>

g要素でグループ化していますが、必須というわけではありません。
clipPath要素内のグラフィック要素ですが、 rect要素、circle要素、polygon要素、ellipse要素、polyline要素、text要素、path要素、use要素が使用できます。
image要素、line要素は試しましたが、ダメみたいです。
クリッピングパスを使用する要素に、clip-path属性を使用し、id名を設定します。

それでは、例を挙げていきます。

HTML
<svg ...>
 <image x="0" y="0" width="300" height="300" opacity="0.25" xlink:href="xxx.jpg" />
 <g>
  <clipPath id="c0">
   <rect x="50" y="50" width="200" height="200" />
  </clipPath>
  <image x="0" y="0" width="300" height="300" xlink:href="xxx.jpg" clip-path="url(#c0)" />
 </g>
</svg>
HTML
<svg ...>
 <image x="0" y="0" width="300" height="300" opacity="0.25" xlink:href="xxx.jpg" />
 <g>
  <clipPath id="c1">
   <circle cx="150" cy="150" r="100" />
  </clipPath>
 </g>
 <image x="0" y="0" width="300" height="300" xlink:href="xxx.jpg" clip-path="url(#c1)" />
</svg>
HTML
<svg ...>
 <image x="0" y="0" width="300" height="300" opacity="0.25" xlink:href="xxx.jpg" />
 <g>
  <clipPath id="c2">
   <polygon points="50,50 225,50 250,250 75,250" />
  </clipPath>
 </g>
 <image x="0" y="0" width="300" height="300" xlink:href="xxx.jpg" clip-path="url(#c2)" />
</svg>
HTML
<svg ...>
 <image x="0" y="0" width="300" height="300" opacity="0.25" xlink:href="xxx.jpg" />
 <g>
  <clipPath id="c3">
   <ellipse cx="150" cy="150" rx="100" ry="50" />
  </clipPath>
 </g>
 <image x="0" y="0" width="300" height="300" xlink:href="xxx.jpg" clip-path="url(#c3)" />
</svg>
HTML
<svg ...>
 <image x="0" y="0" width="300" height="300" opacity="0.25" xlink:href="xxx.jpg" />
 <g>
  <clipPath id="c4">
   <polyline points="0,0 300,75 0,225 300,300" stroke="#000" stroke-width="25" />
  </clipPath>
 </g>
 <image x="0" y="0" width="300" height="300" xlink:href="xxx.jpg" clip-path="url(#c4)" />
</svg>
TSUDOI
HTML
<svg ...>
 <image x="0" y="0" width="300" height="300" opacity="0.25" xlink:href="xxx.jpg" />
 <g>
  <clipPath id="c5">
   <text font-size="72" font-family="arial" x="17" y="176">TSUDOI</text>
  </clipPath>
 </g>
 <image x="0" y="0" width="300" height="300" xlink:href="xxx.jpg" clip-path="url(#c5)" />
</svg>
HTML
<svg ...>
 <image x="0" y="0" width="300" height="300" opacity="0.25" xlink:href="xxx.jpg" />
 <g>
  <clipPath id="c6">
   <path d="M0,150 L75,0 225,0 300,150 225,300 75,300 Z" />
  </clipPath>
 </g>
 <image x="0" y="0" width="300" height="300" xlink:href="xxx.jpg" clip-path="url(#c6)" />
</svg>
HTML
<svg ...>
 <defs>
  <rect id="rect" x="50" y="50" width="200" height="200" />
 </defs>
 <image x="0" y="0" width="300" height="300" opacity="0.25" xlink:href="xxx.jpg" />
 <g>
  <clipPath id="c7">
   <use x="0" y="0" xlink:href="#rect" />
  </clipPath>
 </g>
 <image x="0" y="0" width="300" height="300" xlink:href="xxx.jpg" clip-path="url(#c7)" />
</svg>