mask

グラフィックスをマスクするには<mask>要素の子要素としてマスクのグラフィックスを定義し、 ベースとなるグラフィックスのmask属性にマスクのURLを指定します。


  <defs>
    <!-- マスクの定義 -->
    <mask id="mask">
      <ellipse cx="90" cy="100" rx="50" ry="70" fill-opacity="0.75" fill="gray" />
    </mask>
  </defs>
  <!-- マスクする -->
  <image xlink:href="kuri.jpg" x="10" y="10" width="200" height="200" mask="url(#mask)" />
  

主な属性を次の表に示します。

属性 解説
id 識別名

次の例はイメージに楕円のマスクした例です。比較のために、右側に単純にクリッピングしたイメージを並べて表示します。


  <svg width="350" height="230" stroke="black" stroke-width="1px">
    <defs>
      <!-- マスクの定義 -->
      <mask id="mask">
        <ellipse cx="90" cy="100" rx="50" ry="70"
          fill-opacity="0.75" fill="gray" />
      </mask>
      <!-- クリップの定義 -->
      <clipPath id="clip" clipPathUnits="userSpaceOnUse">
        <ellipse cx="290" cy="100" rx="50" ry="70" fill="none" />
      </clipPath>
    </defs>
    <!-- マスク -->
    <image xlink:href="kuri.jpg" x="10" y="10"
      width="200" height="200" mask="url(#mask)" />
    <!-- クリップ -->
    <image xlink:href="kuri.jpg" x="210" y="10"
      width="200" height="200" clip-path="url(#clip)" />
  </svg> 
  

実行すると次のように表示されます。

グラデーションしたグラフィックスでマスクすることもできます。
次の例はグラデーションした矩形で文字列をマスクする例です。


  <svg width="300" height="160" stroke="black" stroke-width="1px">
    <!--- グラデーションの定義 -->
    <defs>
      <linearGradient id="grad1">
        <stop offset="0%" stop-color="black" />
        <stop offset="50%" stop-color="white" />
        <stop offset="100%" stop-color="black" />
      </linearGradient>
    </defs>
    <!--- マスクの定義 -->
    <defs>
      <mask id="mask2" clipPathUnits="userSpaceOnUse">
        <rect x="10" y="10" width="300" height="80" fill="url(#grad1)" />
      </mask>
    </defs>
    <!--- 文字列をマスクする -->
    <text x="20" y="50" mask="url(#mask2)" style="font-size:36px">
      SVGは楽しいな~
    </text>
    <!--- 参考用グラデーション -->
    <rect x="10" y="80" width="300" height="40" fill="url(#grad1)" />
  </svg>
  

実行すると次のように表示されます。

SVGは楽しいな~

関連項目

clipPath


SVG目次 inserted by FC2 system