スタイルシートを適用する

graphviz-stylesheet.png

SVGで出力するときにのみ意味がある

スタイルシートに関係する属性

属性名 適用できるタイプ デフォルト値 意味 可能なレイアウト
stylesheet G string "" svg only
href GCNE escString "" svg, postscript, map only リンクを貼る
id GCNE escString "" svg, postscript, map only

GraphViz用スタイルシートの書き方

大体一つのノードはこうなっている

<g xmlns="http://www.w3.org/2000/svg" id="a_node5"><a xlink:href="./architecture.svg" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:title="アーキテクチャ図">
<polygon fill="#bce1ea" stroke="#81c7d8" points="299.5,-244.443 180.5,-244.443 180.5,-208.443 299.5,-208.443 299.5,-244.443"/>
<text text-anchor="middle" x="240" y="-222.743" font-family="Consolas" font-size="14.00">アーキテクチャ図</text>
</a>
</g>

SVGにだけ適用する要素を記述する

SVGの最初の部分はこうかいてある

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="528pt" height="420pt" viewBox="0.00 0.00 528.00 420.00">
.....
</svg>

xmlns属性の部分がnamespaceにあたるようだ。nsはname spaceの略なんだね。

@namespace name (C3)

ネームスペース(名前空間)を指定します。最初の形式はデフォルトのネームスペースを指定します。次の形式は名前付きのネームスペースを指定します。

@namespace svg "http://www.w3.org/2000/svg";    /* 名前(svg)付きの名前空間 */

ひとたび@namespace を定義したら、|縦棒で区切ることにより、svgにだけスタイルシートを適用することができる。
svg|rect { ... }        /* svg名前空間の中の rect要素 */

svgにおけるcssの記述法
cssは通常htmlに対するスタイル付けを念頭に入れており,そのほとんどの機能はhtmlを整形するためのものである.従ってsvgにおけるcssは構文こそ同じであるが,指定できるプロパティが異なるため混同しないようにしたい.

プレゼンテーション属性
svgにおいて図形の色や見た目に伴う属性群をsvgのプレゼンテーション属性と呼ぶ.これらの属性は図形要素に直接記述する他にcssから指定することが可能となっている†.それ以外の図形の形状,配置に関わる属性(x,y,width,height…)等は設定できない.これはsvgの本質が図形の形状であることを暗に示している.詳しくはこちらを参照のこと.なおhtmlでのcssと同じ名称でも,svgに適用するにあたり若干の意味合いの変更を伴ったもの(overflow属性など)も存在している.ちなみに埋め込みsvgの場合,svg要素に対してwidth,height属性値をcssにて指定することができるが,これはhtmlの世界でのスタイル値が有効となっているものと考えられる.

プレゼンテーション属性(svgの属性のうち,cssで設定可能なプロパティ値)

プレゼンテーション属性とはsvgの属性のこと
たとえば

  <rect x="200" y="100" width="600" height="300" 
        fill="red" stroke="blue" stroke-width="3"/>

だったら、fillはプレゼンテーション属性である。
  • font
  • font-family
  • font-size
  • font-size-adjust
  • font-stretch
  • font-style
  • font-variant
  • font-weight
  • direction
  • letter-spacing
  • text-decoration
  • unicode-bidi
  • word-spacing
  • clip,color
  • cursor
  • display
  • overflow
  • visibility

svg固有の属性

  • clip-path
  • clip-rule
  • mask
  • opacity
  • enable-background
  • filter
  • flood-color
  • flood-opacity
  • lighting-color
  • stop-color
  • stop-opacity
  • pointer-events
  • color-interpolation
  • color-interpolation-filters
  • color-profile
  • color-rendering
  • fill
  • fill-opacity
  • fill-rule
  • image-rendering
  • marker-end,marker-mid
  • marker-start
  • shape-rendering
  • stroke
  • stroke-dasharray
  • stroke-dashoffset
  • stroke-linecap
  • stroke-linejoin
  • stroke-mitterlimit
  • stroke-opacity
  • stroke-width
  • text-rendering
  • alignment-baseline
  • baseline-shift
  • dominant-baseline
  • glyph-orientation-horizontal
  • glyph-orientation-vertical
  • kerning
  • text-anchor
  • writing-mode

(transform属性はこのカテゴリに含まれない)
†htmlでは見た目を制御するにはcssからスタイルを指定せねばならなかったが,svgでは複数の見た目の制御をサポートする.このことでスタイル付けの優先順等においてhtmlより厄介な問題を生ずるケースがある.

たとえば、立体的にしたかったらこういうフィルタをかけるけど、

<filter id="s45">
  <feGaussianBlur stdDeviation="4" in="SourceAlpha" result="h" />
  <feDiffuseLighting surfaceScale="20" diffuseConstant="1"
                     lighting-color="white" in="h" result="d">
    <fePointLight x="250" y="-50" z="100" />
  </feDiffuseLighting>
 
  <feSpecularLighting surfaceScale="20" specularConstant="1"
      specularExponent="8" lighting-color="white" in="h" result="s">
    <fePointLight x="250" y="-50" z="100" />
  </feSpecularLighting>
 
  <feComposite operator="arithmetic" in="d" in2="SourceGraphic"
               k1="1" k2="0" k3="0.5" k4="0" result="dd"/>
  <feComposite operator="arithmetic" in="dd" in2="s"
               k1="0" k2="1" k3="1" k4="0" result="ss" />
  <feComposite operator="in" in="ss" in2="SourceAlpha" />
</filter>

これをスタイルシートで適用できるのかな

リンクにだけスタイルを適用しようと思ったら、tooltipしたものにもスタイルが適用されてしまった

Bibliography
2. SVG

svg

サポートサイト Wikidot.com svg