タグ別アーカイブ: clipPath

clipPath 要素で SVG 画像を切り抜く

clipPath 要素を使うと自由な形に SVG 内の画像を切り抜くことができます。
clipPath 要素を defs 要素で囲み定義化し ID をふります。clipPath 要素内にはくり抜きたい形を SVG で描写します。

くり抜きを適用したい image 要素へ clip-path 属性を設定し、clipPath 要素に付与した id をリンク先として指定します。

<svg width="500" height="300">
  <defs>
    <clipPath id="sample">
      <circle cx="230" cy="150" r="130" />
    </clipPath>
  </defs>
  <image x="0" y="0" width="500" height="300"
         xlink:href="1.jpg" clip-path="url(#sample)" />
</svg>

上記コードのブラウザでの表示
clipPath 要素で画像を切り抜いた表示例

clipPath 要素内にテキストを定義すればテキストでくり抜くこともできます。

<svg width="500" height="300">
  <defs>
    <clipPath id="sample">
      <text x="50" y="180" fill="#fff" font-weight="bold" font-size="100">nekoco</text>
    </clipPath>
  </defs>
  <image x="0" y="0" width="500" height="300"
         xlink:href="1.jpg" clip-path="url(#sample)" />
</svg>

上記コードのブラウザでの表示
clipPath 要素でテキストの形にくりぬいた表示例