mozilla
Your Search Results

    Basic Transformations

    これまで作成してきた美しい画像を変形させる準備ができました。しかし始めに、<g> 要素を正式に紹介しましょう。このヘルパーを用いると、要素のセット全体にプロパティを割り当てることができます。実際のところ、これが唯一の用途です。例を示します:

    <g fill="red">
      <rect x="0" y="0" width="10" height="10" />
      <rect x="20" y="0" width="10" height="10" />
    </g>
    

    この結果 2 つの赤い長方形ができます。

    以下に示すトランスフォームは、要素の transform 属性の要約です。トランスフォームはホワイトスペース文字区切りで連結することで、連鎖させることができます。

    移動

    適切な属性を用いて要素を配置できる場合でも、要素をあちこちに移動させる必要があるかもしれません。この用途のために、translate() トランスフォームを用意しています。

    <rect x="0" y="0" width="10" height="10" transform="translate(30,40)" />
    

    この例では長方形を描画し、描画位置を (0, 0) ではなく (30, 40) に移します。

    2 番目の値が与えられない場合は、0 であるとみなします。

    回転

    要素を回転させることは、よく行われる処理です。これには rotate() トランスフォームを用います:

    <rect x="20" y="20" width="20" height="20" transform="rotate(45)" />
    

    この例では、45 度回転した正方形を表示します。rotate() の値は "度" 単位で与えます。

    傾斜

    長方形からひし形を作成するために、skewX() および skewY() トランスフォームを利用できます。どちらのトランスフォームも、要素をどれだけ傾けるかを表す角度を与えます。

    拡大と縮小

    scale() は、要素のサイズを変更します。これは 2 つの数値を受け取って、拡大または縮小の比率として用います。0.5 は 50% への縮小を表します。2 番目の数値を省略した場合は、1 番目の値と同じであるとみなします。

    matrix() を用いた複雑なトランスフォーム

    前出のトランスフォームはすべて、3x3 のトランスフォーム行列で表現できます。複数のトランスフォームをまとめるために、matrix(A1, A2, B1, B2, C1, C2) トランスフォームを用いて結果の行列を直接設定することができます。このプロパティに関する詳細情報は、SVG 勧告で得ることができます。

    座標系に与える効果

    トランスフォームを用いるときは、トランスフォームを適用した要素内で新たな座標系が確立します。つまり、その要素や子要素に指定する単位が 1:1 のピクセル対応づけに従わない可能性があり、またそれはトランスフォームに伴う変形、移動、拡大縮小にも波及します。

    <g transform="scale(2)">
      <rect width="50" height="50" />
    </g>
    

    上記の例で、長方形のサイズは 100x100 ピクセルになります。userSpaceOnUse のような属性に依存している場合などに、より興味深い効果が発生します。

    SVG 内への SVG 埋め込み

    HTML とは対照的に、SVG では他の svg 要素をシームレスに埋め込むことができます。この方法を用い、内部の svg 要素で viewBoxwidthheight 属性を活用して新たな座標系を作成することもできます。

    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
      <svg width="100" height="100" viewBox="0 0 50 50">
        <rect width="50" height="50" />
      </svg>
    </svg> 
    

    上記の例は、基本的にはもうひとつ上の例と同じ効果をもたらすもので、すなわち長方形のサイズは rect 要素で指定したサイズの 2 倍になります。

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

    タグ: 
    Contributors to this page: ethertank, yyss
    最終更新者: ethertank,