【D3.js】SVGにスタイルを設定する

SVGStyle

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のスタイル設定する基本についてご紹介でした。

複数オブジェクトになると、スタイル管理はクラスを分けた方が管理しやすいので、その方法も今後ご紹介してきます。

関連情報

タグ:

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA