SVGチャートが・・・
SVGチャート作ったけど、なんとなく洗練されていないなって思ったあなた。
これをどうぞ
main.css
body{
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
これでSVGに限らずWEB全体がエレガントになります。
CSSのfont-smoothingでフォントをキレイに見せる
これもどうぞ
main.css
.axis path,
.axis line {
shape-rendering: crispEdges;
}
軸線のボヤけがなくなり、シャープになります。
shape-rendering
※
ポイントは直線にのみ適用する事です。
円などの曲線に対して適用すると、アンチエイリアス処理がかからなくなり見た目が劣化してしまいます。
お好きであればこれもどうぞ
main.css
.axis path,
.axis line {
stroke-opacity: .5;
stroke-dasharray: 3, 3;
stroke-width: 0.5px;
}
軸線の印象を下げる事でデータに意識がフォーカスされるようになり、わかりやすくなります。