2013年8月9日金曜日

svg : svgの仕様書にあるmarkerのサンプルでダメな場合

ラベル: 時刻:

svgの仕様書にあるmarkerのサンプルをそのまま使うと、firefoxでは表示がちょっとだけ崩れます。

  • svg1.1仕様 ... 11 Painting: Filling, Stroking and Marker Symbols ... 11.6 Markers

こんなふうにパスと三角形の間にグレーの線ができてしまいます。

どうやら、パスの終端(始点)とmarkerの三角形がピッタリ隣り合っているとこうなるようです。 この線はパスの終端とmarkerが重なるように調整すればなくなります。

サンプルmarkerのコードは、 

<marker
        id="Triangle"
        viewBox="0 0 10 10"
        refX="0"
        refY="5" 
        markerUnits="strokeWidth"
        markerWidth="4"
        markerHeight="3"
        orient="auto"
>
    <path d="M 0 0 L 10 5 L 0 10 z" />
</marker>

viewBoxはmarkerとして使う図形の範囲です。 marker要素の配下(この例ではpath)の、指定した範囲をmarkerとして使用します。 markerはviewBoxの(refX, refY)の座標がパスの終端と重なるように描画されます。 グレーの線が出ないようにするには、(refX, refY) = (1, 5)のようにmarkerがパスの終点を塗りつぶすように座標を調整します。

ここで大切なのはビューアによっては境界線の見え方が違うという事です。 markerだけじゃないかもしれないので隣接する図形を扱うときは見え方に注意しましょう。

ちなみに、グレーの線を消すってだけならstroke-linecapをsquareやroundにするなどの解決策もあります。

================

2013/08/20 追記

どうやらIE10はsvgの仕様書の通りにマーカーをレンダリングできないようです。 markerの子要素のpathのデフォルトスタイルが仕様どおりではないからっぽいです。

<path d="M 0 0 L 10 5 L 0 10 z" fill="black" stroke="none" />

のようにfillとstrokeの値を省略せずに書けば仕様書通りの結果になります。

投稿者