SVGチュートリアル

SVG要素

SVGマスク(Mask)

SVGマスク機能は、マスクをSVG形状に適用することができます。マスクはSVG形状のどの部分が見えるか、およびどの透明度を持つかを決定します。SVGマスクは剪切パスのより高度なバージョンと考えられます。

マスクの例

これはシンプルなマスクの例です：

例

<svg　width="500"　height="120">
<defs
　　<mask　id="mask1"　x="0"　y="0"　width="100"　height="100"　>
　　　　<rect　x="0"　y="0"　width="100"　height="50"
　　　　　　　　style="stroke:none;　fill:　#ffffff"/>
　　</mask>
</defs>
<rect　x="1"　y="1"　width="100"　height="100"
　　　　style="stroke:none; fill:#0000ff; mask:url(#mask1)"/>
　　</svg>

テストをしてみる‹/›

この例ではID=maskを使用しています1マスクを定義します。在<mask>要素内には<rect>要素があります。まさにこの<rect>要素がマスクの形状を定義しています。

この例では、<rect>要素がマスクを使用して定義されています。　<rect>要素はCSS style属性の内部でmaskにマスクID属性を参照しています。

実行後の画像効果：

表示される矩形の高さは10ピクセルですが、垂直に前方5ピクセルは見える理由は、マスク矩形が5ピクセル高です。矩形はマスク矩形が覆っている部分のみが見えます。

黒い枠線矩形はマスクのない矩形の大きさです。

他の形状のマスク

SVG形状のどれかを使ってマスクとして使用することができます。これは円をマスクとして使用する例です：

例

<svg>
　　<defs
　　　　<mask　id="mask2"　x="0"　y="0"　width="100"　height="100"　>
　　　　　　<circle　cx="25"　cy="25"　r="25"　style="stroke:none;　fill:　#ffffff"/>
　　　　</mask>
　　</defs>
　　<rect　x="1"　y="1"　width="100"　height="100"
　　　　style="stroke:none; fill:#0000ff; mask:url(#mask2)"/>
</svg>

テストをしてみる‹/›

実行後の画像効果：

再び注意してくださいが、見えるマスク円の部分のみ、参照されるマスク矩形が見えます。

マスク形状色定義マスク不透明度

まで、マスク形状（円形または矩形）の塗り色が#ffffffに設定されています。マスク形状の色はマスクの形状の不透明度で定義されます。マスク形状の色が#ffffff（白色）に近いほど、マスクを使用する形状は不透明度が低くなります。マスク形状の色が#000000（黑色）に近いほど、マスクを使用する形状は透明度が高くなります。

これはマスクが二つの異なる色（#ffffffと66666の矩形で構成されています。マスクは単一の矩形に使用されるため、マスク内の二つの異なる形状が同じ形状にどのように影響するかを確認することができます。

例

<svg　width="500"　height="120">
<defs
　　<mask　id="mask3"　x="0"　y="0"　width="100"　height="100"　>
　　　　<rect　x="0"　y="0"　　width="100"　height="50"
　　　　　　　　　　style="stroke:none;　fill:　#ffffff"/>
　　　　<rect　x="0"　y="50"　width="100"　height="50"
　　　　　　　　　　style="stroke:none;　fill:　#666666"/>
　　</mask>
</defs>
<text　x="10"　y="55"　style="stroke:none; fill:#000000;">
　　　　このテキストは矩形の下にあります
</text>
<rect　x="1"　y="1"　width="100"　height="100"
　　　　style="stroke:none; fill:#0000ff; mask:url(#mask3)"/>
　　</svg>

テストをしてみる‹/›

この例には、矩形の下に配置されたテキストも含まれており、テキストは矩形の半透明マスク部分のみを通して見えます。

実行後の画像効果：

マスク内にグラデーションを使用

マスクにグラデーションを適用すると、マスクの形状のグラデーション透明度を実現できます。

これはグラデーションを定義する例です、グラデーションマスクを使用し、マスクの矩形を使用し、その矩形の下のテキストを使用します、したがって、マスクのグラデーションに応じて透明度がどのように変化するかを確認できます：

例

<svg　width="500"　height="120">
<defs
　　　　<linearGradient　id="gradient1"
　　　　　　　　　　　　　　　　　　　　x1="0%"　　　y1="0%"
　　　　　　　　　　　　　　　　　　　　x2="100%"　y2="0%"
　　　　　　　　　　　　　　　　　　　　spreadMethod="pad">
　　　　　　　　<stop　offset="0%"　　　stop-color="#ffffff"　stop-opacity="1"/>
　　　　　　　　<stop　offset="100%"　stop-color="#000000"　stop-opacity="1"/>
　　　　</linearGradient>
　　　　<mask　id="mask4"　x="0"　y="0"　width="200"　height="100"　>
　　　　　　　　<rect　x="0"　y="0"　　width="200"　height="100"
　　　　　　　　　　　　style="stroke:none;　fill:　url(#gradient1)"/>
　　　　</mask>
</defs>
<text　x="10"　y="55"　style="stroke:none; fill:#000000;">
　　　　このテキストは矩形の下にあります
</text>
<rect　x="1"　y="1"　width="200"　height="100"
　　　　style="stroke:none; fill:#0000ff; mask:url(#mask4)"/>
　　</svg>

テストをしてみる‹/›

実行後の画像効果：

グラデーションマスクは他の効果（例えばフィルター画像）と組み合わせて使用できます。これは一例です、矩形がフィルター画像を使用してフィルルターとして使用され、マスク内にグラデーションを使用しています：

例

<svg　width="500"　height="120">
<defs
　　<linearGradient　id="gradient2"
　　　　　　　　　　　　　　　　x1="0%"　　　y1="0%"
　　　　　　　　　　　　　　　　x2="100%"　y2="0%"
　　　　　　　　　　　　　　　　spreadMethod="pad">
　　　　<stop　offset="0%"　　　stop-color="#ffffff"　stop-opacity="1"/>
　　　　<stop　offset="100%"　stop-color="#000000"　stop-opacity="1"/>
　　</linearGradient>
　　<pattern　id="pattern2"
　　　　　　　　　x="10"　y="10"　width="20"　height="20"
　　　　　　　　　patternUnits="userSpaceOnUse"　>
　　　　<circle　cx="10"　cy="10"　r="10"　style="stroke:　none;　fill:　#0000ff;　"　/>
　　</pattern>
　　<mask　id="mask6"　x="0"　y="0"　width="200"　height="100"　>
　　　　　　<rect　x="0"　y="0"　　width="200"　height="100"
　　　　　　　　　　style="stroke:none;　fill:　url(#gradient2)"/>
　　</mask>
</defs>
<text　x="10"　y="55"　style="stroke:none; fill:#000000;">
　　　　このテキストは矩形の下にあります
</text>
<rect　x="1"　y="1"　width="200"　height="100"
　　　　　　style="stroke:　none;　fill:　url(#pattern2);　mask:　url(#mask6)"/>
　　</svg>

テストをしてみる‹/›

注：表示される矩形が、CSSのfillフィルター画像を参照する方法、およびmaskマスクを参照する方法に注意してください。

実行後の画像効果。

マスク内にフィルター画像を使用

あなたも、マスク内にフィルター画像を使用して、マスクがフィルター画像の形状になるようにすることができます。これは一例です：

例

<svg　width="500"　height="120">
<defs
　　<pattern　id="pattern1"
　　　　　　　　　x="10"　y="10"　width="20"　height="20"
　　　　　　　　　patternUnits="userSpaceOnUse"　>
　　　　　　<circle　cx="10"　cy="10"　r="10"　style="stroke:　none;　fill:　#999999"　/>
　　</pattern>
　　<mask　id="mask5"　x="0"　y="0"　width="200"　height="100"　>
　　　　<rect　x="0"　y="0"　　width="200"　height="100"
　　　　　　　　style="stroke:none; fill:url(#pattern)1)"/>
　　</mask>
</defs>
<text　x="10"　y="55"　style="stroke:none; fill:#000000;">
　　　　このテキストは矩形の下にあります
</text>
<rect　x="1"　y="1"　width="200"　height="100"
　　　　style="stroke:none; fill:#0000ff; mask:url(#mask5)"/>
　　</svg>

テストをしてみる‹/›

実行後の画像効果。注意していただきたいのは、矩形が半透明で、中にはパターンで円が描かれており、他の場所は完全に透明であることです。

SVG<filter>フィルタ SVG<clippath>カットパス