D3.js(v5)のSVG（Scalable Vector Graphics）入門です。
スタイル設定の基本のご紹介です。
目次
HTML/JavaScriptサンプル
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>D3 SVG Rect</title>
<script src="d3.min.js"></script>
</head>
<body>
<svg width=600 height=400>
<circle cx="50" cy="60" r="30" fill="#606060" opacity="0.9"/>
<circle cx="80" cy="60" r="30" fill="#378B91" opacity="0.8"/>
<circle cx="110" cy="60" r="30" fill="#E5CE4E" opacity="0.7"/>
<text x="30" y="150" font-family="Verdana" font-size="30">
Hello, SVG World!
</text>
</svg>
</body>
</html>SVGスタイル設定の基本
以下のような属性でSVGのスタイル設定することができます。
| fill | 塗り潰しカラー設定で、4種類の指定方法があります。 ・カラー名：”orange” ・カラーコード：#3388aa ・RGB： rgb(10, 150, 20) ・RGB＋透明度：rgba(10, 150, 20, 0.5) |
| stroke | 枠線のカラー |
| stroke-width | 枠線太さ |
| opacity | 透明度：0.0〜1.0の％指定 |
| font-family | テキストのフォント指定 |
| font-size | テキストのフォントサイズ |
まとめ
d3.jsでSVGのスタイル設定する基本についてご紹介でした。
複数オブジェクトになると、スタイル管理はクラスを分けた方が管理しやすいので、その方法も今後ご紹介してきます。
関連情報
リンク
リンク
リンク
