SVG In HTML Introduction

概観

この記事とサンプルは、どのように SVG をフォームの背景画像として利用するかを説明します。JavaScript と CSS をどう利用すれば、通常の HTML でのスクリプトと同様に画像を扱えるかを紹介しています。このサンプルは、XHTML (HTML でなく) と統合された SVG をサポートするブラウザでのみ動作します。

ソース

これは、サンプル HTML ページのソースです。

<html xmlns="https://www.w3.org/1999/xhtml">
<head>
  <title>XTech SVG Demo</title>
  <style>
    stop.begin { stop-color:yellow; }
    stop.end { stop-color:green; }
    body.invalid stop.end { stop-color:red; }
    #err { display:none; }
    body.invalid #err { display:inline; }
  </style>
  <script>
    function signalError() {
      document.getElementById('body').setAttribute("class", "invalid");
    }
  </script>
</head>
<body id="body"
   style="position:absolute; z-index:0; border:1px solid black; left:5%; top:5%; width:90%; height:90%;">
  <form>
     <fieldset>
       <legend>HTML Form</legend>
       <p><label>Enter something:</label>
          <input type="text"/>
          <span id="err">Incorrect value!</span></p>
       <p><button onclick="signalError();">Activate!</button></p>
     </fieldset>
  </form>
  <svg xmlns="https://www.w3.org/2000/svg" version="1.1"
    viewBox="0 0 100 100" preserveAspectRatio="xMidYMid slice"
    style="width:100%; height:100%; position:absolute; top:0; left:0; z-index:-1;">
    <linearGradient id="gradient">
      <stop class="begin" offset="0%"/>
      <stop class="end" offset="100%"/>
    </linearGradient>
    <rect x="0" y="0" width="100" height="100" style="fill:url(#gradient)" />
    <circle cx="50" cy="50" r="30" style="fill:url(#gradient)" />
  </svg>
</body>
</html>

議論

このページは、大半が通常の XHTML, CSS, JavaScript で構成されています。統合されたのは <svg> 要素が含まれる部分のみです。この要素とその子は、SVG の名前空間となります。この要素は gradient と gradient で塗りつぶされた二つの図形を含みます。gradient の端の色は CSS によって決められています。ユーザが何か無効な文字列を入力した場合は、<body> に invalid 属性を設定し、スタイルを変更して gradient の end-stop の色を赤にします。(別のスタイルを設定するとエラーメッセージが出ます。)

この方法は、以下のいくつかの点で有利です:

既存のサイトに含まれる通常の XHTML フォームに対して、魅力のある対話式の背景を設定できます。
SVG をサポートしないブラウザに対しても後方互換性があります。単純に背景が表示されないだけです。
単純ながら、非常に効率的です。
画像のサイズは動的に気の効いた方法で必要なサイズに変更されます。
HTML と SVG の双方に適用するスタイルを宣言できます。
同一のスクリプトで HTML と SVG の双方を操作できます。
文書は、完全に標準準拠です。

DOM メソッドでリンクした画像を組み込まれた SVG 要素に追加するには、href の設定に setAttributeNS を使用してください。次の例のようにします:

 var img = document.createElementNS("https://www.w3.org/2000/svg", "image");
 img.setAttributeNS("https://www.w3.org/1999/xlink", "xlink:href", "move.png");

詳細

viewBox 属性は、SVG 画像の座標と相対的な論理座標系を構築します。この場合、画像は 100 対 100 で貼り付けられます。

preserveAspectRatio 属性は、画像のアスペクト比を保ったまま、中心にそのままのサイズの画像を配置し、縦横ではみ出した部分を除きます。

style 属性はフォームの背景になる SVG 要素を指します。

SVG In HTML Introduction

概観

ソース

議論

詳細

関連リンク

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