HTML5/要素/SVG/扇形を描く

HTML5/要素/SVG/扇形を描く

扇形、ピザとかパイ、円グラフ、みたいな円の一部が中心から切り取られているような図形をどう描画するかの話。

このようになる。

<svg id="p1" viewBox="-100 -100 200 200" width="200" height="200">
    <path fill="red" d="M 0 0 L 0 -100 A 100 100 0 0 1 100 0 Z" />
</svg>

まずこのコードの想定は幅と高さが 200px x 200px の領域に描画するとして。 画像の中心を 0, 0 として -100, -100 から 100, 100 というマッピングをする。

path によって描画を指示する。 まず M に続いて初期位置を設定する。ここでは画像の中心を指定している。

次に L で初期位置からどこまで線を引くかを設定している。 ここでは垂直に100上がったところまで引いている。

ここから A で円弧を引くわけだが SVG における円弧の定義がわからないとこのパラメータを作ることができない。 SVGの円弧とは同サイズ同半径の2つの円の重なった交点間をどのようにこの円に沿って描画するかということになる。

この交点を分岐として2つの円のが描画する先は4本ある。

便宜として同じ半径の円Aと円B として説明する。

  • ABの各交点からAの中心に遠いほうを通るAに沿った線
    • より短い線(Aを中心とする中心角180度以下の扇型の弧)
    • より長い先(Aを中心とする中心角180度以上の扇型の弧)
  • ABの各交点からAの中心に近いほうを通るBに沿った線
    • より短い線(Bを中心とする中心角180度以下の扇型の弧)
    • より長い先(Bを中心とする中心角180度以上の扇型の弧)

の4種類となる。

今回は中心角90度扇形。

引きたい円弧の元は真円。

なのでこの半径をまず指定する。2つ指定してこの2つが同じならば真円、違うならば楕円となる。 今回は丁度100の真円なので 100 100 と指定する。

次は円弧を回転させるかだが、回転させないので 0 である。楕円の場合はこの回転角が円弧の形に現れる。

次に円弧を短く繋ぐか長く繋ぐかを指定する今回は中心角90度の扇形の弧なので短く繋ぐので 0 を指定する。

A の弧の上に引くので設定は 1 となる

なので扇形の円弧を描画する記述は

基準円の半径x 基準円の半径y 回転角 短長 基準円 終点のx 終点のy
100 100 0 0 1 100 0

最後の Z は始点に向かうなのでこれでおしまいとなる。

とういう感じで描画は結構たいへんである。

        <svg id="p030" viewBox="-100 -100 200 200" width="200" height="200">
            <path fill="red" d="M 0 0 L 0 -100 A 100 100 0 0 1 50 -86 Z" />
        </svg>
        <svg id="p060" viewBox="-100 -100 200 200" width="200" height="200">
            <path fill="red" d="M 0 0 L 0 -100 A 100 100 0 0 1 86 -50 Z" />
        </svg>
        <svg id="p090" viewBox="-100 -100 200 200" width="200" height="200">
            <path fill="red" d="M 0 0 L 0 -100 A 100 100 0 0 1 100 0 Z" />
        </svg>
        <svg id="p120" viewBox="-100 -100 200 200" width="200" height="200">
            <path fill="red" d="M 0 0 L 0 -100 A 100 100 0 0 1 86 50 Z" />
        </svg>
        <svg id="p150" viewBox="-100 -100 200 200" width="200" height="200">
            <path fill="red" d="M 0 0 L 0 -100 A 100 100 0 0 1 50 86 Z" />
        </svg>
        <svg id="p180" viewBox="-100 -100 200 200" width="200" height="200">
            <path fill="red" d="M 0 0 L 0 -100 A 100 100 0 0 1 0 100 Z" />
        </svg>
        <svg id="p210" viewBox="-100 -100 200 200" width="200" height="200">
            <path fill="red" d="M 0 0 L 0 -100 A 100 100 0 1 1 -50 86 Z" />
        </svg>
        <svg id="p240" viewBox="-100 -100 200 200" width="200" height="200">
            <path fill="red" d="M 0 0 L 0 -100 A 100 100 0 1 1 -86 50 Z" />
        </svg>
        <svg id="p270" viewBox="-100 -100 200 200" width="200" height="200">
            <path fill="red" d="M 0 0 L 0 -100 A 100 100 0 1 1 -100 0 Z" />
        </svg>
        <svg id="p300" viewBox="-100 -100 200 200" width="200" height="200">
            <path fill="red" d="M 0 0 L 0 -100 A 100 100 0 1 1 -86 -50 Z" />
        </svg>
        <svg id="p330" viewBox="-100 -100 200 200" width="200" height="200">
            <path fill="red" d="M 0 0 L 0 -100 A 100 100 0 1 1 -50 -86 Z" />
        </svg>
 
html/html5/elements/svg/draw_pie_shape.txt · 最終更新: 2019-12-02 18:01 by ore