mozilla

HTML の内容への SVG 効果の適用

Firefox 3.5  で SVG 効果を HTML コンテントに適用するために、SVG を CSS スタイルのコンポーネントとして扱うための機能が導入されました。

SVG は同じドキュメントの中、あるいは外部スタイルシートの中のどちらの方法でも指定することが出来ます。

注意: 外部ファイル内の SVG を参照する場合、参照側の文章と同じ基点に対してでなければなりません。

埋め込み SVG を使う

CSS スタイルを用いて SVG 効果を適用するには、まず最初に 適用する SVG を参照する CSS スタイルを作る必要があります。

<style>.stylename { mask: url(#localstyle); }</style>

この例では、 "stylename" で識別される新しいスタイルは "localstyle"というIDで参照される SVG マスクです。この宣言が確立することにより、この CSS スタイルを用いるあらゆる要素に対して、マスクが適用されます。

これは実際よりも複雑な仕組みに見えます。どのように動作しているのかを理解するために、例を見てみましょう。

適用することが出来るのは3つのスタイルです。maskclip-path もしくは filter を使用することが出来ます。

例: マスキング

例えば、次に示すような SVG のコードを HTML 文章に埋め込むことで、HTML コンテントに対してグラデーションマスクを提供する CSS スタイルを宣言することができます:

  <style>.target { mask: url(#m1); }</style>
  <svg:svg height="0">
    <svg:mask id="m1" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox">
      <svg:linearGradient id="g" gradientUnits="objectBoundingBox" x2="0" y2="1">
        <svg:stop stop-color="white" offset="0"/>
        <svg:stop stop-color="white" stop-opacity="0" offset="1"/>
      </svg:linearGradient>
      <svg:circle cx="0.25" cy="0.25" r="0.25" id="circle" fill="white"/>
      <svg:rect x="0.5" y="0.2" width="0.5" height="0.8" fill="url(#g)"/>
    </svg:mask>
  </svg:svg>

1行目で、マスクが "#m1" というIDへの URL を使用して指定されていることに注目してください。これがその後ろで設定されている SVG マスクのIDです。それ以外の部分は、グラデーションマスクの詳細それ自体について記述しています。

実際に SVG 効果を XHTML や HTML に適用する場合、単純に上で定義した target スタイルをその要素に割り当てるだけです。このように:

  <iframe class="target" src="http://mozilla.org"/>

この例では Mozilla.org のウェブサイトを内容に持つ iframe が、適用されたマスクとともにレンダリングされ埋め込まれます。

実際に動かしてみる。

例: クリッピング

この例では、HTML コンテントを切り抜くために、どのようにして SVG を用いるかを実演します。動くデモをみれば、リンクの反応範囲までも切り取られていることに気がつくでしょう。

  <style>.target { clip-path: url(#c1); }</style>
  <svg:svg height="0">
    <svg:clipPath id="c1" clipPathUnits="objectBoundingBox">
      <svg:circle cx="0.25" cy="0.25" r="0.25" id="circle"/>
      <svg:rect x="0.5" y="0.2" width="0.5" height="0.8"/>
    </svg:clipPath>
  </svg:svg>

これは、円と四角形からなる切り取りエリアを作り、"#c1"というIDに割り当てています。これにより、スタイルから参照されています。 このように target スタイルが確立されると、クリップパスはあらゆるエレメントに割り当てることが出来るようになります。

SVG にリアルタイムで変更を加えることができ、その変化が HTML のレンダリングに即時反映されていることに注目してください。たとえば、上で定義したクリップパスの円の大きさを変更することができます:

    var circle = document.getElementById("circle");
    circle.r.baseVal.value = 0.40 - circle.r.baseVal.value;

実際に動かしてみる。この例に含まれているボタンをクリックすることでクリップパスを変更し、変更が反映されるのを確認することができます。

例:フィルタリング

この例では HTML コンテントに対して SVG を使用してどのようにフィルターを適用するかを実演します。スタイルを使って適用されるいくつかのフィルタを定義し、3つの要素それぞれについて、通常およびマウスが乗っている状態の両者に対して適用します。

あらゆる SVG フィルターがこのように適用されます。例えばガウスぼかし効果を適用する場合、このようにします:

<svg:filter id="f1">
  <svg:feGaussianBlur stdDeviation="3"/>
</svg:filter>

あるいは色行列を適用するのであれば、このように:

    <svg:filter id="f2">
      <svg: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"/>

    </svg:filter>

これらはこの例で実演する5つのフィルタのうちの2つです。ほかのフィルターについても知りたい場合はコード全体をご覧ください。

5つのフィルターは次の CSS を用いて適用されます:

  <style>
    p.target { filter:url(#f3); }
    p.target:hover { filter:url(#f5); }
    b.target { filter:url(#f1); }
    b.target:hover { filter:url(#f4); }
    iframe.target { filter:url(#f2); }
    iframe.target:hover { filter:url(#f3); }
  </style>

実際に動かしてみる。

外部参照を使う

クリッピング、マスキング、そのほかに使われる SVG 要素は、その文章が適用される側のHTML文章と同じ基点から得られるならば、外部文章から読み込むことができます。

例えば、CSS が default.css という名前のファイルにあれば、このようになるでしょう:

.target { clip-path: url(resources.svg#c1); }

これで SVG が resources.svg という名前のファイルから、をクリップパスのIDに c1 を使用してインポートされます。

参照

ドキュメントのタグと貢献者

Contributors to this page: dynamis, yiwasaki
最終更新者: dynamis,