SVG 各要素に設定する属性とスタイル設定について

このページは、「系図を描いて SVG データにしてみよう」というページに関する技術メモです。プログラムを書いているうちに自分が「この属性なんだっけ?」となるので備忘録として作りましたが、できあがった SVG ファイルの再利用の際などにも役立つかもしれません (ほんとかな?)。

人を表す要素

人名の文字列を text 要素で表し、それを rect 要素の矩形で囲い、両要素を g 要素によりグループ化して、一人の人物を表現している。 各人物の ID は p0 等の文字列で (ただし、この ID は SVG 要素の中には出てこなくて、プログラム内部で使うだけ)、その人物に対応する各要素の id 属性には、その ID にそれぞれ英文字を一文字追加した値が設定される。

なお、オプションで注釈も付けられるようにしたので、任意の個数の注釈用の text 要素が g 要素の中に含まれる可能性がある。 また、オプションで番号のバッジを矩形の四隅に付けられるようにしたので、バッジを表す円に相当する circle 要素とその中の番号を表す text 要素が g 要素の中に含まれる可能性がある。

g 要素

属性名値の例設定のタイミングその他の説明
id p0g など。 人物の作成時に自動的に割り当てられる。変更されない。 人物の ID に g という接尾辞をつけたもの。すべての SVG 要素の中で一意な ID。
data-right_links h0,p1, など。 人物を追加した段階では空文字列。右側に存在する人物との間に横リンクを設定するごとにリストがのびてゆく。 矩形の右辺から延びる横リンクとそのリンク先の人物のリスト。空文字列またはこの例のようにカンマで終わる文字列。
data-left_links h3,p2,h5,p3, など。 人物を追加した段階では空文字列。左側に存在する人物との間に横リンクを設定するごとにリストがのびてゆく。 左辺に関する同様のリスト。
data-upper_links v0, など。 人物を追加した段階では空文字列。上側に存在する一人の人物との間に縦リンクを設定するか、または、上側に存在する二人の人物同士を結ぶ横リンクとの間に縦リンクを設定するごとに、リストがのびてゆく。 矩形の上辺から延びる縦リンクのリスト。空文字列またはこの例のようにカンマで終わる文字列。
data-lower_links v7, など。 人物を追加した段階では空文字列。下側に存在する一人の人物との間に縦リンクを設定するごとに、リストがのびてゆく。 矩形の下辺から延びる縦リンクのリスト。空文字列またはこの例のようにカンマで終わる文字列。

rect 要素

属性名値の例設定のタイミングその他の説明
id p0r など。 人物の作成時に自動的に割り当てられる。変更されない。 人物の ID に r という接尾辞をつけたもの。すべての SVG 要素の中で一意な ID。
class feminine か masculine か neutral のいずれか。 ユーザの指定した内容に応じた値が、人物の作成時に割り当てられる。変更されない。 矩形のスタイル指定のためにクラスを指定している。系図作成ページで選択する「女性」「男性」「なし」に対応する。
x 数値 人物の作成時にランダムに割り当てられる。あるいは、この人物の位置の基準点とした既存の人物の矩形の位置から計算した値が割り当てられる。どちらなのかは、ユーザの指定による。
その後は、この人物が移動するたびに変化する (明示的に移動対象として指定された場合にも、他の人物の移動にともなって移動させられるなど暗黙的な場合にも、変化する)。		 矩形の左上隅の x 座標。
y 数値 同上。 矩形の左上隅の y 座標。
width 数値 人物名が横書きか縦書きか、人物名の文字数はどれだけか、に応じて、人物の作成時に自動的に決められる。変化しない。 矩形の幅。
height 数値 人物の作成時に自動的に決められる点は width と同様。ただし、height は、「矩形の高さを増やす」メニューを使った際に値が増える。 矩形の高さ。

text 要素 (人名用)

属性名値の例設定のタイミングその他の説明
id p0t など。 人物の作成時に自動的に割り当てられる。変更されない。 人物の ID に t という接尾辞をつけたもの。すべての SVG 要素の中で一意な ID。
x 数値 rect 要素のものと同様。 左上隅の x 座標。rect 要素のものと同じ値。
y 数値 rect 要素のものと同様。 左上隅の y 座標。rect 要素のものと同じ値。
dx 数値 人物の作成時に決められる。変更はされない。 x 方向の左側余白。
dy 数値 人物の作成時に決められる。「矩形の高さを増やす」メニューを使うと増える (増える量は、縦書きか横書きかによって異なる)。 y 方向の上側余白。
writing-mode tb ユーザがこの人物について縦書きを指定した場合のみ、人物の作成時に設定される。変更はされない。 縦書きのときのみ、この要素を設定している (その場合の値は tb である)。
textLength 数値 人物名の文字数に応じて、人物の作成時に自動的に決められる (ただし初期の版ではこの属性を使っていない)。横書きの場合は変化しないが、縦書きの場合は、「矩形の高さを増やす」メニューを使うと増える。人名の修正を行った際にも、自動的に再計算・再設定される。 文字種によらず、文字数に一定の値をかけた値を初期値として設定しているので、いわゆる半角文字の名前の横書きだと、少し間延びして見えるかもしれない。幅広モードと幅狭モードを選べるようにしたので、間延びさせたくない場合は幅狭モードを使うとよい。
lengthAdjust spacing または spacingAndGlyphs 人物の作成時と人名の修正時に自動設定する。 古い版ではこの属性を使っていなかった。幅狭モードの導入に際して、「カナに対してわざと幅狭モードを指定」「途中にスペースを含む名前を英字で表記」などの場合の見栄えを考えて、この属性を導入した。縦書きでは常に spacing (この属性を指定しない場合のデフォルト値) を設定するので、ちょっと意義がわかりづらい。この属性のありがたみがあるのは横書きの場合である。横書きの場合、初期値は spacingAndGlyphs とする。横書きで、名前を短いものへと変更する際に矩形の幅は (縮小せずに) そのままとするときには、文字が横長になりすぎるのを防ぐために、spacing に設定する。横書きで、名前を長いものへと変更する際には、明示的に spacingAndGlyphs に設定し直す。

text 要素 (注釈用)

属性名値の例設定のタイミングその他の説明
id p10n0 など。 注釈の作成時に自動的に割り当てられる。変更されない。 人物の ID に n という接尾辞をつけ、さらに注釈の番号 (人物ごとに 0 から数え始める) を足したもの。すべての SVG 要素の中で一意な ID。
x 数値 注釈の作成時に計算される。注釈対象の人物の移動にともない変化する。
横書きの場合は、以下の場合にも変化する。まず、注釈対象の人物の下辺からの縦リンクを追加するごとに、そのリンクにぶつからないように、必要に応じて注釈の開始位置を右にずらす。縦リンクの削除の場合は逆に、左にずらせるなら左にずらす。また、注釈対象の人物の名前を変えたときも、注釈の開始位置を決め直す。		 左上隅の x 座標。注釈対象の人物の位置に基づく値。横書きの場合は、注釈の長さ、その人物の矩形の横幅、その人物の矩形の下辺につながっている縦リンクの位置も考慮される。縦書きの場合は、既存の注釈の個数も考慮される。
y 数値 注釈の作成時に計算される。注釈対象の人物の移動にともない変化する。
縦書きの場合は、以下の場合にも変化する。まず、注釈対象の人物の左辺からの横リンクを追加するごとに、そのリンクにぶつからないように、必要に応じて注釈の開始位置を下にずらす。横リンクの削除の場合は逆に、上にずらせるなら上にずらす。また、注釈対象の人物の名前を変えたときも、注釈の開始位置を決め直す。さらに、矩形の高さを増やすメニューを使った際にも、注釈の開始位置を決め直す。		 左上隅の y 座標。注釈対象の人物の位置に基づく値。縦書きの場合は、注釈の長さ、その人物の矩形の縦の長さ、その人物の矩形の左辺につながっている横リンクの位置も考慮される。横書きの場合は、既存の注釈の個数も考慮される。
dx 数値 注釈の作成時に決定され、変化しない。 x 方向の左側余白。
dy 数値 注釈の作成時に決定され、変化しない。 y 方向の上側余白。
writing-mode tb 注釈対象の人物が縦書きの場合 (つまり注釈も縦書きの場合)、注釈の作成時に設定される。変更はされない。 注釈対象の人物が縦書きのときのみ、この要素を設定している (その場合の値は tb である)。
textLength 数値 注釈の作成時に設定される。変更されない。 注釈の文字数と、書字方向と、文字幅のモードに応じて決まる。
lengthAdjust spacing または spacingAndGlyphs 注釈の行を追加する際に自動設定される。変更はされない。 縦書きでは spacing とし、横書きでは spacingAndGlyphs としている。
class note のみ。あるいは、note の後にスペースで区切って blue, sage_green, green, orange, red, purple のいずれかを追記したもの。 注釈の行を追加する際に、ユーザの指定した内容に応じた値が割り当てられる。変更されない。 当初は注釈の色が一律に青だったので、古い版で作ったデータだと、この属性が単に note となっている。

circle 要素

属性名値の例設定のタイミングその他の説明
id p11b_upper_left など バッジの作成時に自動的に割り当てられる。変更されない。 人物の ID に b という接尾辞をつけ、アンダスコアでつないで、バッジの位置を示す文字列 (upper_left, lower_left, upper_left, upper_right のいずれか) をつなげたもの。
cx 数値 バッジの作成時に計算され、設定される。その後は、バッジをつけた対象人物が移動するたびに変化する (明示的に移動対象としてその人物が指定された場合にも、他の人物の移動にともなってその人物が移動させられるなど暗黙的な場合にも、変化する)。 円の中心の x 座標。人物を表す矩形の頂点より少しだけ (CONFIG.badge_offset で定義された量だけ) 外側の位置。
cy 数値 同上 円の中心の y 座標。人物を表す矩形の頂点より少しだけ (CONFIG.badge_offset で定義された量だけ) 外側の位置。
r 17 バッジの作成時に設定される。変化しない。 バッジの円の半径。CONFIG.badge_radius で定義されている定数。
fill black など ユーザの指定した内容に応じた値が、バッジの作成時に設定される。変更されない。 バッジは、文字色を白に固定して、背景を暗めの色にしている。色を表すキーワードのうちで暗めの色の名前を選択肢として選べるようにしてある。具体的には、black, dimgray, darkblue, crimson, saddlebrown, purple, darkgreen が選択可能。

text 要素 (バッジの中の番号用)

バッジは、「何代目か」「兄弟姉妹順が何番目か」といったことを表すことを想定したものなので、バッジの中のテキストとしては 0 から 999 までの整数値のみが許される。

属性名値の例設定のタイミングその他の説明
id p11bn_upper_left など バッジの作成時に自動的に割り当てられる。変更されない。 対応する circle 要素の id における接尾辞の b を bn に置き換えた文字列である。
x 数値 ユーザが指定した位置 (右上隅、左上隅、右下隅、左下隅) にしたがって、バッジの作成時に計算され、設定される。その後は、バッジをつけた対象人物が移動するたびに変化する。 数字が 3 桁の場合にバッジの円の中にほぼぴったり収まるような開始位置。
y 数値 同上。 円の中心から、バッジの数字用のフォントサイズの半分だけ上に遡った位置。
dx 数値 バッジの作成時に設定される。変化しない。 数字の桁数に基づいて計算される。
dy 0 バッジの作成時に設定される。変化しない。 これが 0 であることを前提に y を決めている、とも言える。
textLength 数値 バッジの作成時に計算される。変更されない。 CONFIG.badge_font_size の半分に、バッジの数字の桁数を掛けた長さ。
class num_badge バッジの作成時に設定される。変化しないし、この値しか使わない。 CSS で文字色やフォントサイズを指定している。

使うのは path 要素。

属性名値の例設定のタイミングその他の説明
id h0 など 横リンクの作成時に自動的に割り当てられる。変更されない。 すべての SVG 要素の中で一意な ID。
class single と double のいずれか。 ユーザの指定した内容に応じた値が、横リンクの作成時に割り当てられる。変更されない。 一重線か二重線かを示す。
なお、「想定外のことが起きたのでどうやって描画すべきか判断停止」という場合には、single または double の後に、スペースで区切って exceptional というクラスを追加で指定している (デフォルトの CSS ファイルではこのクラスに対してショッキングピンクを指定している)。線のつなぎ方そのものに問題がなければ、テキストエディタでスペースと exceptional を削除するとよい (そうすればそのファイルを読み込んで続きの作業を再開して差し支えない)。
d M 441,170 l 102,0 など (一重線の場合)。

M 213,114 l 250,0 m 0,4 l -250,0 など (二重線の場合)。		 横リンクが追加されたときに初めて設定される。この横リンクにつながる人物が移動するたびに変化する (明示的にその人物が移動対象として指定された場合にも、他の人物の移動にともなって移動させられるなど暗黙的な場合にも、変化する)。また、横書きの人名の修正に際して名前の長さが変わるのに連動してその人物につながる横リンクの再描画が生じる際、および、左右いずれかの人物の矩形の高さを増やすことで横リンクが下に移動させられる際にも変化する。
なお、長さが変わらずに位置だけ移動する場合と、長さが変化する場合がある。		 相対移動で表現したパスの文字列。一重線か二重線を描くようなパスを指定する文字列になっている。
左端は、左側の人物の矩形の x + width + 1 に相当。 右端は、右側の人物の矩形の x - 1 に相当。 ここで 1 を足したり引いたりしているのは、線幅 (2px) の半分が 1 だからである。この調整をしないと、矩形の輪郭の縦線に横リンクが半幅分だけ食い込んでしまって汚い。描画関数 draw_h_link に引数として渡される左右両端の x 座標の値は、この半幅調整後の値である。
なお、この横リンクが二重線の場合、描画関数 draw_h_link に引数として渡される y 座標の値に ±2 した値が、上の線と下の線それぞれの y 座標である (その差が 4px となるため、左記の例に見られる通り、二重線を描く際には m 0,4 という真下への 4px の移動が生じる)。
data-connect_pos_x 数値 この横リンクを描画するたびに (横リンクを新規作成した際、および、左右の人物の一方または双方の移動にともなって横リンクを再描画する際、および、横書きの人名の修正に際して名前の長さが変わるのに連動してその人物につながる横リンクの再描画が生じる際、および、左右いずれかの人物の矩形の高さを増やすことで横リンクが下に移動させられる際)、計算して設定する。 この横リンクから下へ縦リンクをのばすときに起点となる点の x 座標。 具体的には、この横リンクの x 方向における中点。なお、中点を求める際に 2 で割って端数が出る場合は、小数点以下を切り捨てている。 初期の版では、横リンクの x 方向における中点を指定していたが、横リンクの左右 5% ずつを除いた範囲内で自由に指定できるように変えた (とは言え、デフォルト値は従前どおり中点である)。
data-connect_pos_y 数値 同上。 その縦リンクの起点となる点の y 座標。この横リンクが一重線の場合は、この横リンク自体の y 座標に等しい。この横リンクが二重線の場合は、下の線の y 座標に等しい。d 属性の説明も参照。
data-start_x 数値 同上。 この横リンクの左端の x 座標。d 属性の説明も参照。
data-end_x 数値 同上。 この横リンクの右端の x 座標。d 属性の説明も参照。
data-y 数値 同上。 この横リンクの y 座標。一重線か二重線かによらず、描画用関数 draw_h_link に y 座標を指定するための引数として与えられた値を、この属性に設定している。
data-lhs_person p0 など。 ユーザの指定した内容に応じた値が、横リンクの作成時に割り当てられる。変更されない。 この横リンクの左側の人物の ID。
data-rhs_person p1 など。 同上。 この横リンクの右側の人物の ID。
data-lower_links v1, など。 横リンクを追加した段階では空文字列。下側に存在する一人の人物との間に縦リンクを設定するごとに、リストがのびてゆく。 この横リンクから下へのびる縦リンクの ID のリスト。空文字列、または、この例のようにカンマで終わる文字列。

使うのは path 要素。縦リンクは、まっすぐな縦の直線か、鉤の手に二回曲がる線である。後者の場合、縦リンクの上端となる点から固定長 (CONFIG.dist_to_turning_pt) だけまず真下に降りて、左右いずれかに適宜の距離だけ移動し、その後、縦リンクの下端となる点まで真下に降りる、という形である。

属性名値の例設定のタイミングその他の説明
id v1 など。 縦リンクの作成時に自動的に割り当てられる。変更されない。 すべての SVG 要素の中で一意な ID。
class solid と dashed のいずれか。 ユーザの指定した内容に応じた値が、縦リンクの作成時に割り当てられる。変更されない。 実線か破線かを示す。
なお、「想定外のことが起きたのでどうやって描画すべきか判断停止」という場合には、solid または dashed の後に、スペースで区切って exceptional というクラスを追加で指定している (デフォルトの CSS ファイルではこのクラスに対してショッキングピンクを指定している)。線のつなぎ方そのものに問題がなければ、テキストエディタでスペースと exceptional を削除するとよい (そうすればそのファイルを読み込んで続きの作業を再開して差し支えない)。
d M 1130,405 l 0,95 など (縦の直線の場合)

M 292,65 l 0,32 l -160,0 l 0,78 など (鉤の手に二回曲がる線の場合)		 縦リンクが追加されたときに初めて設定される。この縦リンクに (直接的に、または、縦リンクの上端が位置する横リンクを介して間接的に) つながる人物が移動するたびに、変化する (明示的にその人物が移動対象として指定された場合にも、他の人物の移動にともなって移動させられるなど暗黙的な場合にも、変化する)。
なお、位置だけ移動する場合と、長さが変化する場合と、線の形状 (縦の直線か、鉤の手に二回曲がる線か) までもが変化する場合がある。		 相対移動で表現したパスの文字列。縦の直線か、鉤の手に二回曲がる線を指定する。
縦リンクの上端は、(i) 人物を示す矩形の下辺に位置する場合と、(ii) 横リンク上に位置する場合がある。 (i) の場合、上側の人物の x から x + width までの範囲の、「左から 1/4 の点」「中点」「左から 3/4 の点」のうちのいずれかが、縦リンクの上端の x 座標として描画関数 draw_v_link に与えられる。また、上側の人物の y + height が、縦リンクの上端の y 座標として描画関数 draw_v_link に与えられる。 (ii) の場合、横リンクの data-connect_pos_x 属性と data-connect_pos_y 属性の値が、上端の位置を表す引数として描画関数 draw_v_link に与えられる。
そして、(i) と (ii) のいずれにせよ縦リンクの下端は、人物を示す矩形の上辺にある。この人物 (要するに子) の x から x + width までの範囲の、「左から 1/4 の点」「中点」「左から 3/4 の点」のうちのいずれかが、縦リンクの下端の x 座標として描画関数 draw_v_link に与えられる。また、この人物の y が、縦リンクの下端の y 座標として描画関数 draw_v_link に与えられる。
なお、横リンクの描画の場合と同様の理由から線幅の半分 (つまり 1px) の調整が必要だが、その調整は描画関数 draw_v_link の内部で行っているので、描画関数に与えられる引数の値は、調整前の値である (なお、横リンクの場合は調整後の値を引数として与える形にしているので、不統一で分かりづらいかもしれない)。
data-from_x 数値 この縦リンクの新規描画・再描画のたびに、描画関数 draw_v_link に引数として与えられた値がこの属性に記録される。 上端の点の x 座標。
data-from_y 数値 同上。 同じく y 座標。
data-to_x 数値 同上。 下端の点の x 座標。
data-to_y 数値 同上。 同じく y 座標。
data-parent1 p0 など。 ユーザの指定した内容に応じた値が、縦リンクの作成時に割り当てられる。変更されない。 この縦リンクが一人の人物から下にのびている場合はその人物 (つまり親)。 逆に、この縦リンクが横リンクの真ん中から下にのびている場合は、その横リンクでつながれた二人 (つまり両親) のうち左側の人物。
data-parent1_pos_idx 0 または 1 または 2 縦リンクの作成時に割り当てられる。変更されない。 この縦リンクが一人の人物 (親) から下にのびている場合にのみ使う属性。その人物の矩形の幅の、「左から 1/4 の点」「中点」「左から 3/4 の点」を、それぞれ 0, 1, 2 で表している。いずれの点がこの縦リンクの上端なのかを示す。
data-parent2 p1 など。 ユーザの指定した内容に応じた値が、縦リンクの作成時に割り当てられる。変更されない。 この縦リンクが横リンクの真ん中から下にのびている場合にのみ使う属性。 その横リンクでつながれた二人のうち右側の人物の ID。
data-child p2 など。 ユーザの指定した内容に応じた値が、縦リンクの作成時に割り当てられる。変更されない。 縦リンクの下端でつながる人物 (つまり子) の ID。
data-child_pos_idx 0 または 1 または 2 縦リンクの作成時に割り当てられる。変更されない。 縦リンクの下端に位置する人物 (子) の矩形の幅の、「左から 1/4 の点」「中点」「左から 3/4 の点」を、それぞれ 0, 1, 2 で表している。いずれの点がこの縦リンクの下端なのかを示す。

CSS によるスタイル設定

生成される SVG ファイルは、pedigree_svg.css というスタイルファイルを参照している。 ユーザが自分で新たにスタイルファイルを定義し、それを参照するように SVG ファイルを書き換えてもよい (SVG ファイルもスタイルファイルもテキストエディタで編集可能)。 ただし、その際は以下の点に注意してほしい。

系図を作成する際の前提条件として利用している値

現段階では下記の点を描画の前提条件として利用している。そのため、下記の点をスタイルファイルで書き換えてしまうと、表示が崩れるおそれがある。SVG 画像はスケーラブルなので (つまり下記の点を書き換えなくても綺麗に拡大・縮小できるから)、書き換えの必要はまずないものと思われる。

ユーザ定義の CSS ファイルで自由に設定しても表示が崩れない (はずの) もの

SVG ファイルの利用

系図作成ページ で作ったデータは、SVG ファイルとして一時保存 (ダウンロード) できる。そして、後日それを読み込んで続きから作業することも可能である。ダウンロードした SVG ファイルは、ブラウザでも閲覧できる。

また、ダウンロードしたファイルを変換ないし編集することも可能である。たとえば、PNG 形式へ変換できるし、何らかのソフトウェアで加工することもできる。 他のソフトウェアで SVG データを編集する際には、data-* の形の属性は削除しても問題ないが、それらの属性を削除したデータを再度 系図作成ページ で読み込んだ場合は、続きから編集作業を行うことはできない。