図とグラフ / 図を構成する印
Drawing
図を構成する線と面、その配置寸法を揃え、紙面に馴染む図版を組みます。
図を構成する印の一覧
図は何でできているか。
- 実線：確定
- 破線：不在・未確定
- 細線：補助
HTML
<figure class="plate plate-wide" id="fig-marks">
<p><strong>図は何でできているか。</strong></p>
<div class="draw-wrap" role="region" aria-label="図を構成する線と面" tabindex="0">
<svg class="draw" style="--dd-draw-width:768px" viewBox="0 0 768 184" role="img" aria-label="7種類の面：対象、識別された対象、別の状態、未確定、欠落、領域、グループ。5種類の線：方向、未成立の関係、補助、主題、引き出し線。">
<text class="draw-cap" x="16" y="16">面</text>
<rect class="draw-box" x="16" y="28" width="92" height="44" rx="6"/>
<text class="draw-note" x="62" y="90" text-anchor="middle">対象</text>
<rect class="draw-box-toned tone-accent" x="124" y="28" width="92" height="44" rx="6"/>
<text class="draw-note" x="170" y="90" text-anchor="middle">識別</text>
<rect class="draw-box-alt tone-accent" x="232" y="28" width="92" height="44" rx="6"/>
<text class="draw-note" x="278" y="90" text-anchor="middle">別の状態</text>
<rect class="draw-box-open" x="340" y="28" width="92" height="44" rx="6"/>
<text class="draw-note" x="386" y="90" text-anchor="middle">未確定</text>
<rect class="draw-box-open tone-neutral" x="448" y="28" width="92" height="44" rx="6"/>
<text class="draw-note" x="494" y="90" text-anchor="middle">欠落</text>
<rect class="draw-fill tone-accent" x="556" y="28" width="92" height="44" rx="6"/>
<text class="draw-note" x="602" y="90" text-anchor="middle">領域</text>
<rect class="draw-group" x="664" y="28" width="92" height="44" rx="6"/>
<text class="draw-note" x="710" y="90" text-anchor="middle">グループ</text>
<text class="draw-cap" x="16" y="122">線</text>
<path class="draw-line draw-arrow" d="M16 142H108"/>
<text class="draw-note" x="62" y="172" text-anchor="middle">方向</text>
<path class="draw-line-open draw-arrow" d="M124 142H216"/>
<text class="draw-note" x="170" y="172" text-anchor="middle">未成立</text>
<path class="draw-guide" d="M232 142H324"/>
<text class="draw-note" x="278" y="172" text-anchor="middle">補助</text>
<path class="draw-line draw-focus tone-accent" d="M340 142H432"/>
<text class="draw-note" x="386" y="172" text-anchor="middle">主題</text>
<path class="leader" d="M448 142H540"/>
<circle class="leader-foot" cx="448" cy="142"/>
<text class="draw-note" x="494" y="172" text-anchor="middle">位置を指す</text>
</svg>
</div>
<ul class="legend legend-inline">
<li><svg viewBox="0 0 28 8" aria-hidden="true"><path class="draw-line" d="M1 4H27"/></svg>実線：確定</li>
<li><svg viewBox="0 0 28 8" aria-hidden="true"><path class="draw-line-open" d="M1 4H27"/></svg>破線：不在・未確定</li>
<li><svg viewBox="0 0 28 8" aria-hidden="true"><path class="draw-guide" d="M1 4H27"/></svg>細線：補助</li>
</ul>
<figcaption>形は生成側、色はシステムが受け持ちます。不在はどの印でも破線にし、その種類をトーンで示します。色が見えなくても意味が残ります。<span class="plate-source">組版見本。すべて公開クラスを使い、HTML内で色を直接指定していません。</span>
</figcaption>
</figure>クラスと属性
| クラス / 属性 | 用途 |
|---|---|
.draw-wrap / .draw | スクロールするラッパーと等倍の図。--dd-draw-widthをviewBoxの幅にpxで合わせ、その寸法で作図します。狭い列でも縮まず、広い列でも伸びません。 |
.draw-box / -toned / -alt / -open | 対象・識別された対象・白抜きの別状態・不在を示す面。boxは領域を意味し、<rect>専用ではありません。欠落を示す円にも同じロールを使います。 |
.draw-group / .draw-group-open / .draw-fill | 確定したまとまりを囲む細線、仮のまとまりを囲む線、トーンの淡色で塗る領域。 |
.draw-line / -open / .draw-guide / .draw-focus | 関係、未成立の関係、内容より細い補助線、図の主題を表す印。強調は加え、ほかを弱めて作りません。 |
.draw-arrow / .draw-defs / .draw-arrowhead | 共通の矢印の頭で終わる線と、そのmarker。defsは文書の枠に置きます。参照先がなくてもSVGはエラーにならず、矢印の頭だけ消えるためです。 |
.draw-label / -strong / -note / -value / -cap / -mono | 文字のロール。図のラベルも、上の段落と同じ読者が同じ距離で読む文書の文字です。 |
.tone-* | すべての印がトーンを読みます。不在の破線を保ったまま、到達限界はwarn、欠落はtone-neutral、測定の不在はtone-dangerで示します。 |
使い方の注意
形は生成側、色はシステムが受け持ちます。印にfillやstrokeを直接書くと、トーン・テーマ・強制カラーに追従しません。fill="var(--dd-accent)" fill-opacity=".12"は、特にダーク時に隣の部品の淡色と一致しません。fill="none"は色ではなく形なので使えます。text-anchorとdominant-baselineはSVG属性に書きます。CSS宣言は属性に必ず勝つためです。ラベルにfont-sizeを指定せず、説明文を<text>で図内に書き込まないでください。部分に番号を付け、文章は下の凡例に置きます。Annotateを参照してください。
作例はシステムの配色設定に従います。ヘッダーの◐で自動・ライト・ダークを試せます。