脳log[20071205] SVGで簡単な折れ線グラフを書こうかと思った。(途中)

♪ [SVG] SVGで簡単な折れ線グラフを書こうかと思った。(途中)

数字を列挙したファイルがあるので、この数字を加工せずにそのまま放り込んだら X軸と Y軸の上限と原点を適当に決めて、見られるグラフになったりすると便利だな、と思って。(はてなグラフは知ってるけど id持ってないので)

viewBox属性を使うと空間の 原点と大きさを自由に定義できるので、与えられた数字の最小値と最大値とその差を使って viewBoxを定めると、入力された数字を加工せずとも点が端から端までをフルに使って配置されて具合がよい。

で、viewBoxという仮想平面を表示するときには表示サイズまで拡大縮小をする必要があって、このときに線の太さが一緒に拡大縮小されて( ゜Д゜)マズー というのがいま。

こんな状態。

Inkscapeというベクタ画像ソフトは、[File]->[Inkscape Preference]->[Transforms]タブ->[Scale stroke width] のチェックを外す、という手順でこれを回避できるらしいのだけど、SVGにはそのものズバリの属性はないのかね。

 参考サイトメモ

• SVG 1.1 勧告 日本語版 (www.hcn.zaq.ne.jp)
• SVG学習辞典 (dhr.at.infoseek.co.jp)

 やっぱりいるよね同じことで困ってる人

http://www.nabble.com/Stroke-width-bug--t4712455.html

 Q「単位をつけてるのに拡大されたり縮小されたりするのっておかしくね？
 A「全部相対的なもんだ
 Q「仕様にそういうふうに書いてあるとは思わない
 A「CSSの ptとか pcとか cmとか mmっていう単位は全部 pxの何倍かっていうのを示してるだけなんだよ
 Q「わかった。でオフトピだけどこの問題を解決する方法はあるの？
 A「javascriptを使って逆の拡大縮小をかけるしかない。SVG1.2になればなんとかなってるかもしれない
 B「Mozillaの SVGを最初に実装した alex fritzeは正に今のようなことを考えて実装をしたと思う(I believe)。それが the mozila codebaseに投稿されて受理されたかは知らないけど

こんな雰囲気だろうか

その図形に対して javascriptで逆の拡大縮小をかけろっていってるけど、座標をスケールさせたままで線の太さだけを元に戻せるのだろうか。