この翻訳は不完全です。英語から この記事を翻訳 してください。
最近のブラウザは、CSS スタイルの中での SVG の使用をサポートしており、HTML コンテンツに対してグラフィカルな効果を適用することができます。
CSS スタイル中の SVG は、HTML ドキュメントと同じファイル内に含めることも、外部スタイルシートに含めることもできます。使用できるプロパティには、mask、clip-path もしくは filter があります。
埋め込み SVG を使う
CSS スタイルを用いて SVG 効果を適用するには、まず最初に 適用する SVG を参照する CSS スタイルを作る必要があります。
<style>p { mask: url(#my-mask); }</style>上の例では、my-mask という ID を持つ SVG マスクにより、すべての段落がマスクされます。
例: マスキング
例えば、次に示すような SVG のコードを HTML 文章に埋め込むことで、HTML コンテントに対してグラデーションマスクを提供する CSS スタイルを宣言することができます:
<svg height="0">
<mask id="mask-1">
<linearGradient id="gradient-1" y2="1">
<stop stop-color="white" offset="0"/>
<stop stop-opacity="0" offset="1"/>
</linearGradient>
<circle cx="0.25" cy="0.25" r="0.25" id="circle" fill="white"/>
<rect x="0.5" y="0.2" width="300" height="100" fill="url(#gradient-1)"/>
</mask>
</svg>.target {
mask: url(#mask-1);
}
p {
width: 300px;
border: 1px solid #000;
display: inline-block;
}この CSS の中で、"#mask-1" という ID への URL を使用してマスクが指定されていることに注目してください。これがその後ろで設定されている SVG マスクのIDです。それ以外の部分は、グラデーションマスクの詳細について記述しています。
実際に SVG 効果を XHTML や HTML に適用する場合、単純に上で定義した target スタイルをその要素に割り当てるだけです。このように:
<p class="target" style="background:lime;">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing
<b class="target">elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua.</b>
Ut enim ad minim veniam.
</p>The above example would be rendered with the mask applied to it.
例: クリッピング
この例では、HTML コンテントを切り抜くために、どのようにして SVG を用いるかを実演します。リンクの反応範囲までも切り取られていることに注目してください。
<p class="target" style="background:lime;">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing
<b class="target">elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua.</b>
Ut enim ad minim veniam.
</p>
<button onclick="toggleRadius()">Toggle radius</button>
<svg height="0">
<clipPath id="clipping-path-1" clipPathUnits="objectBoundingBox">
<circle cx="0.25" cy="0.25" r="0.25" id="circle"/>
<rect x="0.5" y="0.2" width="0.5" height="0.8"/>
</clipPath>
</svg>.target {
clip-path: url(#clipping-path-1);
}
p {
width: 300px;
border: 1px solid #000;
display: inline-block;
}これは、円と四角形からなる切り取りエリアを作り、"#clipping-path-1"というIDに割り当てています。これにより、スタイルから参照されています。 このように target スタイルが確立されると、クリップパスはあらゆるエレメントに割り当てることが出来るようになります。
SVG にリアルタイムで変更を加えることができ、その変化が HTML のレンダリングに即時反映されていることに注目してください。たとえば、上で定義したクリップパスの円の大きさを変更することができます:
function toggleRadius() {
var circle = document.getElementById("circle");
circle.r.baseVal.value = 0.40 - circle.r.baseVal.value;
}
この例に含まれているボタンをクリックすることでクリップパスを変更し、変更が反映されるのを確認することができます。
例: フィルタリング
この例では HTML コンテントに対して SVG を使用してどのようにフィルターを適用するかを実演します。スタイルを使って適用されるいくつかのフィルタを定義し、3つの要素それぞれについて、通常およびマウスが乗っている状態の両者に対して適用します。
<p class="target" style="background: lime;">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam.
</p>
<pre class="target">lorem</pre>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing
<b class="target">elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua.</b>
Ut enim ad minim veniam.
</p>あらゆる SVG フィルタがこのように適用されます。例えばガウスぼかし効果を適用する場合、このようにします:
<svg height="0">
<filter id="f1">
<feGaussianBlur stdDeviation="3"/>
</filter>
</svg>あるいは色行列を適用するのであれば、このように:
<svg height="0">
<filter id="f2">
<feColorMatrix values="0.3333 0.3333 0.3333 0 0
0.3333 0.3333 0.3333 0 0
0.3333 0.3333 0.3333 0 0
0 0 0 1 0"/>
</filter>
</svg>さらにいくつかのフィルタを示します:
<svg height="0">
<filter id="f3">
<feConvolveMatrix filterRes="100 100" style="color-interpolation-filters:sRGB"
order="3" kernelMatrix="0 -1 0 -1 4 -1 0 -1 0" preserveAlpha="true"/>
</filter>
<filter id="f4">
<feSpecularLighting surfaceScale="5" specularConstant="1"
specularExponent="10" lighting-color="white">
<fePointLight x="-5000" y="-10000" z="20000"/>
</feSpecularLighting>
</filter>
<filter id="f5">
<feColorMatrix values="1 0 0 0 0
0 1 0 0 0
0 0 1 0 0
0 1 0 0 0" style="color-interpolation-filters:sRGB"/>
</filter>
</svg>5つのフィルターは次の CSS を用いて適用されます:
p.target { filter:url(#f3); }
p.target:hover { filter:url(#f5); }
b.target { filter:url(#f1); }
b.target:hover { filter:url(#f4); }
pre.target { filter:url(#f2); }
pre.target:hover { filter:url(#f3); }例: ぼかし文字
文字にぼかしを入れるために、webkit ベースのブラウザでは（プレフィックス付きの）blur という CSS フィルタを用意しています。SVG のフィルタを用いて同じ効果を実現できます。
<p class="blur">Time to clean my glasses</p>
<svg height="0">
<defs>
<filter id="wherearemyglasses" x="0" y="0">
<feGaussianBlur in="SourceGraphic" stdDeviation="1"/>
</filter>
</defs>
</svg>SVG と CSS のフィルタはおなじクラス内で適用できます：
.blur { filter: url(#wherearemyglasses); }
ぼかし効果は重たい処理のため、慎重に使用してください。特に、スクロールやアニメーションされる要素では注意が必要です。
外部参照を使う
クリッピング、マスキング、そのほかに使われる SVG 要素は、その文章が適用される側のHTML文章と同じ基点から得られるならば、外部文章から読み込むことができます。
例えば、CSS が default.css という名前のファイルにあれば、このようになるでしょう:
.target { clip-path: url(resources.svg#c1); }
これで SVG が resources.svg という名前のファイルからインポートされ、クリップパスのIDに c1 が使用されます。